1.安装依赖

npm i react-router-dom

2.引⼊实现路由所需的组件，以及页⾯组件

import { BrowserRouter, Routes, Route } from 'react-router-dom';import Foo from './Foo';import Bar from './Bar';

function App(){ return (

)}

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

⼀、Switch 重命名为Routes (⽤法如上)⼆、路由跳转

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

三、Link组件

Link组件只能在Router内部使⽤，因此使⽤到Link组件的组件⼀定要放在顶层的Router之内import { Link } from 'react-router-dom';to foo

四、NavLink组件

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

import { NavLink } from 'react-router-dom';

function Foo(){ return (

style={ (isActive) => ({color: isActive ? 'red' : '#fff'}) } >Click here )}

五、Outlet (渲染任何匹配的⼦级路由页⾯)

return (

六、获取params参数

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

import { useParams } from 'react-router-dom';export default function Foo(){ const params = useParams(); return (

在以前版本中，组件的props会包含⼀个match对象，在其中可以取到路径参数。但在最新的6.x版本中，⽆法从props获取参数。并且，针对类组件的withRouter⾼阶组件已被移除。因此对于类组件来说，使⽤参数有两种兼容⽅法：1.将类组件改写为函数组件

2.字节写⼀个HOC来包裹类组件，⽤useParams获取参数后通过props传⼊原本的类组件

七、编程式路由导航⽤useNavigate代替useHistory（JS路由跳转）

使⽤useNavigate钩⼦函数⽣成navigate对象，可以通过JS代码完成路由跳转，不可以在类组件中使⽤useNavigate函数，可以改成函数组件或者在外包裹⼀层withRouter来解决（可以看另外⼀篇博客）

// v5

import { useHistory } from 'react-router-dom';

function MyButton() {

let history = useHistory(); function handleClick() { history.push('/home'); };

return Submit;};

现在，history.push()将替换为navigation()：

// v6

import { useNavigate } from 'react-router-dom';

function MyButton() {

let navigate = useNavigate(); function handleClick() { navigate('/home'); };

return Submit;};

history的⽤法也将被替换成：// v5

history.push('/home');history.replace('/home'); // v6

navigate('/home');

navigate('/home', {replace: true});

⼋、search参数

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

使⽤useSearchParams hook来访问查询参数。其⽤法和useState类似，会返回当前对象和更改它的⽅法更改searchParams时，必须传⼊所有的查询参数，否则会覆盖已有参数

import { useSearchParams } from 'react-router-dom';

// 当前路径为 /foo?id=12function Foo(){

const [searchParams, setSearchParams] = useSearchParams(); console.log(searchParams.get('id')) // 12 setSearchParams({ name: 'foo'

}) // /foo?name=foo return (

九、默认路由

定义： 在嵌套路由中，如果URL仅匹配了⽗级URL，则Outlet中会显⽰带有index属性的路由

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

注意：⽬前我的index⽆法设置默认⼦路由（可以⽤Navigite重定向实现类似的默认功能，需要默认的路由设置⼀个指向⼦路由的重定向，但是体验会差⼀点，有点顿）

⼗、全匹配路由

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

⼗⼀、多组路由

通常，⼀个应⽤中只有⼀个Routes组件。

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

⼗⼆、重定向

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

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

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

)}

本⽂转载的⽬的为⾃⼰初学react记录和学习，侵权请联系我删除