声明式模式

声明式模式启用了基本的路由功能，如将 URL 匹配到组件、在应用红导航以及通过 <Link>、useNavigate 和 useLocation 等API提供活动状态。

主要标签：

• BrowserRouter
• Routes
• Route
• NavLink
• Link

主要Hooks：

• useNavigate: 路由跳转
• useParams: 接收动态段路由参数
• useSearchParams: 接收URL ? 后的参数
• useLocation: 获取state的参数

BrowserRouter

<BrowserRouter>
    <App />
</BrowserRouter>

告诉 React 这个应用需要使用浏览器 URL 进行路由。

Routes/Route

<Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
    <Route path="/user" element={<User />} />
</Routes>

相当于链接，点击对应URL的链接，显示对应画面。

Route 可以嵌套，形成类似 Vue 中路由表的结构。

<Routes>
    <Route element={<Layout />} >
        <Route index element={<HomePage />} />
        <Route path="data" element={<DataTransmission />} />
    </Route>

    <Route path="login/:id?" element={<LoginPage />} />

    <Route path="*" element={<div>404 Not Found</div>} />
</Routes>

详细的可以查看 https://reactrouter.remix.org.cn/start/declarative/routing#routing

NavLink/Link

用来做路由跳转的标签，本质是 a 标签。

<NavLink to="/">Home</NavLink>

<Link to="/">Home</Link>

区别是NavLink 会添加激活状态，Link 不会。

点击 NavLink 后，会自动添加名为 active 的class，常用于导航、Tab 之类的功能。

useNavigate

路由跳转函数。

import { useNavigate } from 'react-router'

function A() {
    let navigate = useNavigate();

    function goHome() {
        navigate('/home')
    }

    return (
        <>
            <button onClikc={goHome}>go Home</button>
        </>
    )
}

返回上一页

navigate(-1)

实例化的 useNavigate 后，第一个参数为要跳转的画面

useParams

接收 动态段 路由参数

如：

<Route path="user/:id" element={<UserPage />} />

路由跳转：

<Link to="/user/125">user</Link>

// 或

navigate("/user/125")

UserPage:

import { useParams } from 'react-router'

function UserPage() {
    let params = useParams();

    ...
}

当路由跳转 /user/125 时， params 为 {id: '125'}

useSearchParams

接收URL ? 后的参数

路由跳转：

<Link to="/user?id=125">user</Link>

// 或

navigate("/user?id=125")

UserPage:

import { useSearchParams } from 'react-router'

function UserPage() {
    const [searchParams] = useSearchParams()
    let id = searchParams.get('id');

    ...
}

当路由跳转时 id = 125

useLocation

获取state的参数

路由跳转：

<Link to="/user" state={{name: 'Tom', age: 18}}>user</Link>

// 或

navigate("/", {
    state: {
        name: 'Tom',
        age: 18
    }
})

UserPage:

import { useLocation } from 'react-router'

function UserPage() {
    const location = useLocation()

    ...
}

当路由跳转时 location 为 { name: 'Tom', age: 18}。