持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第26天，点击查看活动详情

这是React系列第五期。

第一期（项目启动）：juejin.cn/post/710282…

第二期（JSX）：juejin.cn/post/710334…

第三期（组件）：juejin.cn/post/710334…

第四期（Hocks）：juejin.cn/post/711086…

1. router初体验

路由主要完成的是组件之前根据url进行跳转的功能。

1. 安装 react-router-dom

yarn add react-router-dom@6

2. 创建如下的文件

2. 核心组件

1. 两种Router: HashRouter和BrowserRouter 包裹了整个应用，每个React应用需要有一个。
2. Link 用于指定导航链接，完成路由转跳，组件通过to属性指定路由地址，最终为渲染为链接元素。

3. Routes与Route

Routes提供一个路由出口，满足条件的路由组件会渲染到组件内部，定义path和组件的对应关系。

Route完成链接到组件的对应配置。

4.页面转跳

步骤

1. 导入useNavigate钩子函数；
2. 执行钩子函数，得到转跳函数；
3. 执行转跳函数完成转跳；
4. 如果转跳时，不想留下历史记录，可以添加额外参数replace为true

携带参数

5. 嵌套路由

嵌套路由也就是二级路由的使用，有两种形式：

1. 在Route下再套一层Route当作二级路由

<Routes>
    <Route path='/' element={一级组件 /}>
        <Route path='/in' element={二级组件 /}/>
    </Route>
</Routes>

2. 使用<Outlet />指定二级路由

import { oOutlet } from 'react-router-dom'

function Layout() {
    return (
        <div>
            layout
            {/*二级路由出口*/}
            <Outlet />
        </div>
    )
}