router一文解读——React(5)

·  阅读 65
router一文解读——React(5)

持续创作,加速成长!这是我参与「掘金日新计划 · 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
复制代码
  1. 创建如下的文件

image.png

2. 核心组件

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

image.png

3. Routes与Route

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

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

image.png

4.页面转跳

步骤

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

image.png 携带参数

image.png

5. 嵌套路由

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

  1. 在Route下再套一层Route当作二级路由
<Routes>
    <Route path='/' element={一级组件 /}>
        <Route path='/in' element={二级组件 /}/>
    </Route>
</Routes>
复制代码
  1. 使用<Outlet />指定二级路由
import { oOutlet } from 'react-router-dom'

function Layout() {
    return (
        <div>
            layout
            {/*二级路由出口*/}
            <Outlet />
        </div>
    )
}
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改