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做路由跳转时不出错
3、Switch 重命名为Routes (用法如上)
4、路由跳转
在跳转路由时，如果路径是/开头的则是绝对路由，否则为相对路由，即相对于“当前URL”进行改变
5、Link组件
Link组件只能在Router内部使用，因此使用到Link组件的组件一定要放在顶层的Router之内
import { Link } from 'react-router-dom';
to foo
6、NavLink组件
-
NavLink组件和Link组件的功能是一致的，区别在于可以判断其to属性是否是当前匹配到的路由 -
NavLink组件的style或className可以接收一个函数，函数接收一个isActive参数，可根据该参数调整样式
import { NavLink } from 'react-router-dom';
function Foo(){
return (
({color: isActive ? 'red' : '#fff'}) }
>Click here
)
}
7、Outlet (渲染任何匹配的子级路由页面)
管理端（后台）项目用这个api较为常见
return (
我是A组件 --------- 编程式路由导航使用示例
{/* 渲染任何匹配的子级路由页面 */}
8、获取params参数
- 在
Route组件中的path属性中定义路径参数 - 在组件内通过
useParams hook访问路径参数
import { useParams } from 'react-router-dom';
export default function Foo(){
const params = useParams();
return (
{params.id}
)
}
在以前版本中，组件的props会包含一个match对象，在其中可以取到路径参数。但在最新的6.x版本中，无法从props获取参数。
并且，针对类组件的withRouter高阶组件已被移除。因此对于类组件来说，使用参数有两种兼容方法：
1.将类组件改写为函数组件
2.自己写一个HOC来包裹类组件，用useParams获取参数后通过props传入原本的类组件
9、编程式路由导航用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 ;
};
现在，history.push()将替换为navigation()：
// v6
import { useNavigate } from 'react-router-dom';
function MyButton() {
let navigate = useNavigate();
function handleClick() {
navigate('/home');
};
return ;
};
history的用法也将被替换成：
// v5
history.push('/home');
history.replace('/home');
// v6
navigate('/home');
navigate('/home', {replace: true});
10、search参数
- 查询参数不需要在路由中定义
- 使用
useSearchParams hook来访问查询参数。其用法和useState类似，会返回当前对象和更改它的方法 - 更改
searchParams时，必须传入所有的查询参数，否则会覆盖已有参数
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
)
}
11、默认路由
定义： 在嵌套路由中，如果URL仅匹配了父级URL，则Outlet中会显示带有index属性的路由
- 当url为/foo时：Foo中的Outlet会显示Default组件
- 当url为/foo/bar时：Foo中的Outlet会显示为Bar组件
- 注意：目前我的index无法设置默认子路由（可以用Navigite重定向实现类似的默认功能，需要默认的路由设置一个指向子路由的重定向，但是体验会差一点，有点顿）
12、全匹配路由
定义： path属性取值为*时，可以匹配任何（非空）路径，同时该匹配拥有最低的优先级。可以用于设置404页面。
13、多组路由
通常，一个应用中只有一个Routes组件。
但根据实际需要也可以定义多个路由出口（如侧边栏和主页面都要随URL而变化）
14、重定向
当在某个路径/a下，要重定向到路径/b时，可以通过Navigate组件进行重定向到其他路径
等价于以前版本中的Redirect组件
import { Navigate } from 'react-router-dom';
function A(){
return (