react-router-dom v6 详细使用示例

一、基本使用

1. 先安装依赖

   npm i react-router-dom
   复制代码

2. 介绍实现路由所需的组件，以及页面组件

   从“react-router-dom”导入 { BrowserRouter, Routes, Route };
   从“./Foo”导入 Foo；
   从“./Bar”导入 Bar；
   函数应用程序（）{
   返回 （
   <浏览器路由器>
   < 路线 >
   < 路由路径 = "/foo" 元素 = { < Foo /> } /> < 路由路径 = "/bar" 元素 = { < Bar /> } /></ Routes >
   </ BrowserRouter >
   );
   }
   复制代码

• 小路 ：小路
• 元素 : 要渲染的组件

注意 ： 浏览器路由器 组件最好放在所有顶层组件之外，这样可以保证内部组件使用Link进行路由跳转不会出错

2.路由跳转

跳跃路线时，如果路径是 / 第一个是绝对路由，否则是 相对路由 ，马上 相对于当前 URL 做出改变

2.1 链接组件

链接组件 只有在 路由器 内部使用，所以使用 链接组件 组件必须放在顶层Router中

 从“react-router-dom”导入{链接}；  
  
 < 链接到 = "foo" > 到 foo</ Link > ;  
 复制代码

2.2 导航链接组件

• 导航链接组件 和 链接组件 功能是一样的，不同的是可以判断 财产 是否是当前匹配的路由

• 导航链接组件 的 风格 或者 班级名称 可以接收一个函数，该函数接收一个包含 活跃 字段的对象是参数，可以根据参数调整样式

  从“react-router-dom”导入 { NavLink }；

  函数 Foo() {
  返回 （
  < NavLink style = {({ isActive }) => ({ color: isActive ? "red" : "#fff" })}> 点击这里</ NavLink >
  );
  }
  复制代码

2.3 程序化跳转

利用 使用导航 钩子函数生成 导航功能 ，可以通过JS代码完成路由跳转

使用导航 替换以前的版本 使用历史

 从 'react-router-dom' 导入 { useNavigate }；  
  
 函数 Foo(){  
 常量导航 = useNavigate();  
 返回 （  
 // 上一个路径：/a;当前路径：/a/a1  
 <div onClick = {() => navigate('/b')}> 跳转到/b</ div >  
 <div onClick = {() => navigate('a11')}> 跳转到/a/a1/a11</ div >  
 <div onClick = {() => navigate('../a2')}> 跳转到/a/a2</ div >  
 <div onClick = {() => navigate(-1)}> 跳转到 /a</ div >  
 )  
 }  
 复制代码

• 可以直接传入目标路由跳转（可以使用相对路径，语法同JS）
• 传入 -1 意味着回来

四、动态路由参数

4.1 路径参数

• 存在 路由组件 中间 路径属性 在中定义路径参数

• 在组件内传递 使用参数 钩子访问路径参数

  <浏览器路由器>
  < 路线 >
  < 路由路径 = "/foo/:id" 元素 = { < Foo /> } /></ Routes >
  </ BrowserRouter>;

  从“react-router-dom”导入 { useParams }；
  导出默认函数 Foo() {
  常量参数 = useParams();
  返回 （

  < h1 > {params.id} ); } 复制代码

路径匹配规则

当 URL 同时匹配带路径参数的路径和不带参数的路径时，将有限匹配不带参数的“特定”路径。

 <Route  path= "teams/:teamId" element={<Team /> } />  
 <Route  path= "teams/new" element={<NewTeamForm /> } />  
 复制代码

上面的两条路径将匹配 团队/新 .

路径的常规匹配已被删除。

兼容的类组件

在以前的版本中，组件的 道具 将包含一个 匹配对象 ，其中可以取路径参数。

但是在最新的 6.x 版本中，无法从 props 中获取参数。

并且，对于类组件 带路由器 高阶组件已被移除。所以对于类组件，有两种兼容的方式使用参数：

1. 将类组件重写为函数组件
2. 自己写一个 HOC 来包装类组件，使用 使用参数 拿到参数后，通过props传入原来的类组件

4.2 搜索参数

• 查询参数不需要在路由中定义

• 利用 使用搜索参数 挂钩以访问和修改查询参数。它的用法和 使用状态 同样，将返回当前对象和改变它的方法

• 利用 设置搜索参数 小时， 必须传入所有查询参数 , 否则现有参数将被覆盖

  从“react-router-dom”导入 { useSearchParams }；

  // 当前路径是/foo?id=12
  函数 Foo() {
  const [searchParams, setSearchParams] = useSearchParams();
  安慰。日志（searchParams.get（“id”））； // 12
  设置搜索参数（{
  名称：“富”，
  }); // /foo?name=foo
  返回

  foo</ div > ;
  }
  复制代码

五、嵌套路由

5.1 路由定义

通过嵌套写作 路由组件 实现嵌套路由的定义。

小路 以。。开始 / 是绝对路径，否则是相对路径。

 < 路线 >  
 <路由路径=“/”元素={<首页/>}></ Route >  
 <路由路径=“/父亲”元素={<父亲/>}>  
 <路由路径=“子”元素={<子/>}></ Route >  
 < Route path = ":name" element = { <另一个/>}></ Route >  
 </ Route >  
 </ Routes >  
 复制代码

5.2 在父组件中显示

在父组件中使用 出口 显示匹配的子组件

 从“react-router-dom”导入 { Outlet }；  
 函数父亲（）{  
 返回 （  
 < div > // ... 自己组件的内容 // 留给子组件的出口 Child < Outlet />  
 </ div >  
 );  
 }  
 复制代码

5.3 在组件中定义

可用于任何组件 路线 组件，并且在组件内的 Routes 中，路径默认以当前组件的路径为前缀。

注意：此时定义父组件的路由时，在后面加上 /* ，否则父组件将无法渲染。

 <路线>  
 < 路由路径 = "/" 元素 = { < 主页 /> } />  
 < 路由路径 = "dashboard/*" 元素 = { < Dashboard /> } />  
 </ Routes>  
 功能仪表板（）{  
 返回 （  
 <div>  
 <p>看，更多路线！</ p >  
 < 路线 >  
 < 路由路径 = "/" 元素 = { < DashboardGraphs /> } /> < 路由路径 = "发票" 元素 = { < InvoiceList /> } /></ Routes >  
 </ div >  
 );  
 }  
 复制代码

6. 默认路由

定义： 在嵌套路由中，如果 URL 仅匹配父 URL，则 出口 将显示 指数 子路由的属性。可用于任何级别的路由

 < 路线 >  
 < 路由路径 = "/foo" 元素 = {Foo} >  
 < 路线索引元素 = {默认} ></ Route >  
 < 路由路径 = "bar" 元素 = {Bar} ></ Route >  
 </ Route >  
 </ Routes >  
 复制代码

• 当网址是 /foo 何时：Foo 中的 Outlet 将显示 Default 组件
• 当网址是 /foo/酒吧 何时：Foo 中的 Outlet 将显示为 Bar 组件

七、全匹配路由

定义： 小路 属性值为 * , 可以匹配任何（非空）路径 最低优先级 .可用于设置 404 页面。

 < 路线 >  
 < 路由路径 = "/foo" 元素 = {Foo} >  
 < 路由路径 = "bar" 元素 = {Bar} ></ Route >  
 < 路由路径 = "*" 元素 = {NotFound} ></ Route >  
 </ Route >  
 </ Routes >  
 复制代码

八、多组路由

通常，一个应用程序中只有一个 路线 成分。

但是也可以根据实际需要定义多个路由出口（例如侧边栏和主页面必须随URL变化）

 <路由器>  
 < 侧边栏 >  
 < 路线 >  
 <路线></ Route >  
 </ Routes >  
 </ SideBar >  
 <主要>  
 < 路线 >  
 <路线></ Route >  
 </ Routes >  
 </ Main >  
 </ Router >  
 复制代码

九、路由重定向

当在某个路径上时 /一个 接下来，重定向到路径 /b , 你可以通过 导航 重定向到其他路径的组件

相当于以前的版本 重定向 成分

 从“react-router-dom”导入{导航}；  
 函数 A() {  
 返回 < 导航到 = "/b" />;  
 }  
 复制代码

10. 布局布线

当多个路由有一个共同的父组件时，可以将父组件提取为一个而无需 小路 和 指数 Attributed Route 组件（布局路由）

 < 路由元素 = { < 页面布局 />}>  
 < 路由路径 = "/privacy" 元素 = { < 隐私 />} />  
 < 路由路径 = "/tos" 元素 = { < Tos />} />  
 </ Route >  
 复制代码

这种写法相当于：

 <Route  
 路径=“/隐私”  
 元素={  
 <PageLayout>  
 <Privacy />  
 </PageLayout>  
 }  
 />  
 <Route  
 路径="/tos"  
 元素={  
 <PageLayout>  
 <Tos />  
 </PageLayout>  
 }  
 />  
 复制代码

11. 订阅和操作历史栈的原理

浏览器记录导航堆栈以在浏览器中启用前进和后退功能。在传统的前端项目中，URL 更改意味着从服务器重新请求数据。

在当前客户端路由中，可以以编程方式控制对 URL 更改的响应。在点击a标签的回调函数中使用 event.preventDefault() 阻止默认事件，其中 URL 更改不会带来任何 UI 更新。

 <一个  
 href="/联系人"  
 onClick={ ( 事件 ) => {  
 // 阻止浏览器更改 URL 并请求新文档  
 事件。防止默认（）；  
 // 将一个条目推送到浏览器历史堆栈并更改 URL  
 窗户。历史。 pushState({}, undefined, "/contact");  
 }}  
 />  
 复制代码

11.1 历史对象

浏览器并没有直接提供监控 URL 变化的接口（push、pop、replace），所以 反应路由器 对本地人 历史 包装线路，提供一个 API 来监听 URL 的变化。

 让历史=创建浏览器历史（）；  
 历史。听（（{位置，动作}）=> {  
 // 每当有新位置进入时都会调用它  
 // 动作是 POP、PUSH 或 REPLACE  
 });  
 复制代码

利用 反应路由器 当不需要操作 History 对象时 ( 路线 组件将运行）

11.2 位置对象

反应路由器 正确的 窗口位置 打包后提供一个简洁的Location对象，如：

 {  
 pathname: "/bbq/pig-pickins", // 主机名后面的 URL  
 search: "?campaign=instagram", // 查询参数  
 hash: "#menu", // 哈希值，用于确定页面滚动的具体位置  
 state: null, // window.history.state 的包装器  
 键：“aefz24ie”//  
 }  
 复制代码

状态

不显示在页面上，不会引起刷新，仅由开发者操作。

可用于记录用户的跳转详情（跳转到当前页面的位置）或跳转时携带信息。

可用于 关联 组件或 导航 方法

 <Link  to= "/pins/123" state={{ fromDashboard:  true }} />  
 让导航 = useNavigate() ;  
 导航（“/users/123”，{状态：partialUser}）；  
 复制代码

在目标的组件中，您可以使用 使用位置 获取对象的方法

 让位置 = 使用位置（）；  
 console.log(location.state) ;  
 复制代码

状态中的信息会被序列化，所以日期对象等信息会变成字符串

钥匙

每个 Location 对象都有一个唯一的 key，可以用来实现基于 Location 的滚动管理或数据缓存。

例如： 位置键 和 URL 作为键。每次请求数据前，先检查缓存是否存在，判断请求是否真正发送，从而实现客户端数据缓存。

12.各种Router组件

12.1 HashRouter和BrowserRouter的区别

• 哈希路由器 只会修改 URL 的哈希部分；尽管 浏览器路由器 修改的是URL本身
• 哈希路由器 是的 纯前端 Route，直接输入URL即可访问；使用时 浏览器路由器 除非 Nginx 配置为将请求定向到相应的 HTML 文件，否则直接输入 URL 将显示 404。第一个条目 / 路径或单击 关联 组件跳转时不发送请求

12.2 不稳定_HistoryRouter

利用 不稳定_历史路由器 需要传入一个 历史 库的实例，它将允许在不做出反应的情况下操纵历史对象。

由于项目使用的history和react-router中使用的history版本可能不同，这个API目前被标记为unstable

12.3 内存路由器

哈希路由器 和 浏览器路由器 基于外部对象（历史）进行导航，以及 内存路由器 它自己存储和管理状态栈，多用于测试场景。

12.4 原生路由器

React Native 的推荐路由器组件

12.5 静态路由器

在 nodejs 端用于渲染反应应用程序。

 从“反应”导入*作为反应；  
 从“react-dom/server”导入 * 作为 ReactDOMServer；  
 从“react-router-dom/server”导入 { StaticRouter }；  
 从“http”导入http；  
  
 函数 requestHandler(req, res) {  
 让 html = ReactDOMServer.渲染字符串（  
 < StaticRouter location = {req.url} > {/* 应用程序的其余部分放在这里 */}</ StaticRouter >  
 );  
  
 水库写（html）；  
 水库结尾（）;  
 }  
  
 http。创建服务器（请求处理程序）。听（3000）；  
 复制代码

13.使用JS对象定义路由：useRoutes

利用 使用路线 Hook，可以使用 JS 对象代替 Routes 组件和 Route 组件来定义路由。它的功能类似于 反应路由器配置

使用路线 返回是一个 React 元素，或 null。

对于传入的配置对象，其类型定义如下：

 接口路由对象 {  
 区分大小写？：布尔值；  
 孩子？：RouteObject []；  
 元素？：React.ReactNode；  
 索引？：布尔值；  
 路径？：字符串；  
 }  
 复制代码

版权声明：本文为博主原创文章，遵循CC 4.0 BY-SA版权协议。转载请附上原文出处链接和本声明。

这篇文章的链接： https://homecpp.art/2712/7753/0709

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/30370/37501209