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={ } />
<Route path= "teams/new" element={ } />
复制代码

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

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

兼容的类组件

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

但是在最新的 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>
功能仪表板（）{
返回 （


看，更多路线！</ 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
路径=“/隐私”
元素={



}
/>
<Route
路径="/tos"
元素={



}
/>
复制代码

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

posted @ 2022-09-12 09:38  哈哈哈来了啊啊啊  阅读(1692)  评论(0)    收藏  举报