您现在的位置是：网站首页> 编程资料编程资料

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

2023-05-24 434人已围观

简介 react-router-dom v6 使用详细示例_React_

一、基本使用

首先安装依赖：

npm i react-router-dom

引入实现路由所需的组件，以及页面组件：

import { BrowserRouter, Routes, Route } from "react-router-dom"; import Foo from "./Foo"; import Bar from "./Bar"; function App() { return ( } />} /> ); }

path：路径
element：要渲染的组件

注意：BrowserRouter组件最好放在最顶层所有组件之外，这样能确保内部组件使用 Link 做路由跳转时不出错

二、路由跳转

在跳转路由时，如果路径是/开头的则是绝对路由，否则为相对路由，即相对于当前 URL进行改变

2.1 Link 组件

Link组件只能在Router内部使用，因此使用到Link组件的组件一定要放在顶层的 Router 之内

import { Link } from "react-router-dom"; to foo;

2.2 NavLink 组件

NavLink组件和Link组件的功能是一致的，区别在于可以判断其to属性是否是当前匹配到的路由
NavLink组件的style或className可以接收一个函数，函数接收一个含有isActive字段的对象为参数，可根据该参数调整样式

import { NavLink } from "react-router-dom"; function Foo() { return (  ({ color: isActive ? "red" : "#fff" })}> Click here  ); }

2.3 编程式跳转

使用useNavigate钩子函数生成navigate函数，可以通过 JS 代码完成路由跳转

useNavigate取代了原先版本中的useHistory

import { useNavigate } from 'react-router-dom'; function Foo(){ const navigate = useNavigate(); return ( // 上一个路径：/a； 当前路径： /a/a1  navigate('/b')}>跳转到/b
 navigate('a11')}>跳转到/a/a1/a11
 navigate('../a2')}>跳转到/a/a2
 navigate(-1)}>跳转到/a
 ) }

可以直接传入要跳转的目标路由（可以使用相对路径，语法和 JS 相同）
传入-1表示后退

三、动态路由参数

3.1 路径参数

在Route组件中的path属性中定义路径参数
在组件内通过useParams hook 访问路径参数

} />; import { useParams } from "react-router-dom"; export default function Foo() { const params = useParams(); return ( {params.id}
 ); }

路径匹配规则

当URL同时匹配到含有路径参数的路径和无参数路径时，有限匹配没有参数的”具体的“（specific）路径。

} />} />

如上的两个路径，将会匹配 teams/new 。

路径的正则匹配已被移除。

兼容类组件

在以前版本中，组件的props会包含一个match对象，在其中可以取到路径参数。

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

并且，针对类组件的 withRouter 高阶组件已被移除。因此对于类组件来说，使用参数有两种兼容方法：

将类组件改写为函数组件
自己写一个 HOC 来包裹类组件，用 useParams 获取参数后通过 props 传入原本的类组件

3.2 search 参数

查询参数不需要在路由中定义
使用 useSearchParams hook 来访问和修改查询参数。其用法和 useState 类似，会返回当前对象和更改它的方法
使用 setSearchParams 时，必须传入所有的查询参数，否则会覆盖已有参数

import { useSearchParams } from "react-router-dom"; // 当前路径为 /foo?id=12 function Foo() { const [searchParams, setSearchParams] = useSearchParams(); console.log(searchParams.get("id")); // 12 setSearchParams({ name: "foo", }); // /foo?name=foo return foo
; }

四、嵌套路由

5.1 路由定义

通过嵌套的书写Route组件实现对嵌套路由的定义。

path 开头为 / 的为绝对路径，反之为相对路径。

}>}>}>}>

5.2 在父组件中展示

在父组件中使用Outlet来显示匹配到的子组件

import { Outlet } from "react-router-dom"; function Father() { return (  // ... 自己组件的内容 // 留给子组件Child的出口 
 ); }

5.3 在组件中定义

可以在任何组件中使用 Routes 组件，且组件内的Routes中，路径默认带上当前组件的路径作为前缀。

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

} />} /> function Dashboard() { return ( Look, more routes!
} />} />
 ); }

五、默认路由

定义： 在嵌套路由中，如果 URL 仅匹配了父级 URL，则Outlet中会显示带有index属性的子路由。可以使用在路由的任何层级

当 url 为/foo时：Foo 中的 Outlet 会显示 Default 组件
当 url 为/foo/bar时：Foo 中的 Outlet 会显示为 Bar 组件

六、全匹配路由

定义： path属性取值为*时，可以匹配任何（非空）路径，该匹配拥有最低的优先级。可以用于设置 404 页面。

七、多组路由

通常，一个应用中只有一个Routes组件。

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

八、路由重定向

当在某个路径/a下，要重定向到路径/b时，可以通过Navigate组件进行重定向到其他路径

等价于以前版本中的Redirect组件

import { Navigate } from "react-router-dom"; function A() { return ; }

九、布局路由

当多个路由有共同的父级组件时，可以将父组件提取为一个没有 path 和 index 属性的Route组件（Layout Route）

}>} />} />

这种写法等价于：

 } />提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                
                
                                            上一篇：一文搞懂 React 18 中的 useTransition() 与 useDeferredValue()_React_
                                                                下一篇：分享Vue组件传值的几种常用方式(一)_vue.js_