前言
react-router-dom 是react中通用的路由组件，随着新版本的更新，尤其是为了配合 react hook 的 v6版本，已经在使用上有了较大的变化，本文旨在对比旧版本（v5），以及介绍新版本的使用
react-router-dom的版本介绍
本文中使用的两个版本：v5(5.3.0)和v6(6.1.1)
其中：
1.v5版本既兼容了class component(react v16.8前)，又兼容了function component(v16.8及以后，即hook)
2.v6版本，若仍然使用this.props.history.push(),此时props会提示是空值，v6文档里把路由组件默认接受的三个属性给移除了，管网文档里给出的解决方案是使用useNavigate()这个hook，但是hook只能存在于无状态组件(function component)，无法用在类组件中(calss component)
所以，仍然使用class component(类组件)进行项目开发的，建议react-router-dom使用v5及以前的版本，如果使用function component(函数组件)进行项目开发的，建议使用最新的v6版本（v5版本虽然兼容了hook用法，但是相比v6还是有点区别）
react-router-dom在class component类组件中的用法(v5.3.0)
import React from "react";
import { Router, Route, Switch, Redirect, HashRouter } from "react-router-dom";
import { createHashHistory } from "history"
...
const route = () => {
<HashRouter>
<Switch>
// 不可放在首行
// <Redirect path="*" to="/" />
<Route exact path="/" component={Home} />
<Route exact path="/listPage" component={ListPage} />
<Route exact path="/detailPage/:id" component={DetailPage} />
// 其他匹配重定向
<Redirect path="*" to="/" />
</Switch>
</HashRouter>
}
export default route;
注意：<Router history={createHashHistory()} />和<HashRouter/>的区别 ==> 似乎没有区别
路由跳转：
1、this.props.history.push('/listPage') 路由入栈
2、this.props.history.replace('listPage') 路由替换
路由返回：
this.props.history.goBack() 返回上一级路由
携带参数：
1、state属性携带参数：（隐式传参）
this.props.history.push({
pathname: '/listPage',
state: {
aaa: 123
}
});
// 跳转新页面后 通过this.props.history.location.state获取
// http://localhost:3000/#/listPage
2、search属性携带参数：（显式传参）
this.props.history.push({
pathname: '/listPage',
search: '?bbb=456',
});
// 跳转新页面后 通过this.props.history.location.search获取
// url:http://localhost:3000/#/listPage?bbb=456
3、路由传参携带参数：（显式传参，需要router.js中配合）
this.props.history.push({
pathname: '/detailPage' + '/' + id,
});
// 需要router.js 中路由配合：<Route exact path="/detailPage/:id" component={DetailPage} />
// 跳转新页面后 通过this.props.match.params.id获取
// url:http://localhost:3000/#/detailPage/789
react-router-dom在function component函数组件中的用法(v6.1.1)，即hook
import React from "react";
import { HashRouter, Route, Routes, Navigate } from "react-router-dom";
...
const route = () => {
<HashRouter>
<Routes>
<Route exact path="/" element={<Home />} />
<Route exact path="/listPage" element={<ListPage />} />
<Route exact path="/detailPage/:id" element={<DetailPage />} />
<Route exact path="*" element={<Navigate to="/" />} />
// <Route exact path="*" element={<NotFound />} />
</Routes>
</HashRouter>
}
export default route;
注意点：
1.Routes替换了Switch
2.Route中element替换了component/render属性，且值是组件，而非组件名
3.Navigate组件替换了Redirect
路由跳转
import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
// push
navigate(path);
// replace
navigate(path, {replace: true});
路由返回
const navigate = useNavigate();
// go back
navigate(-1);
携带参数：
1、state属性携带参数：（隐式传参）
const navigate = useNavigate();
navigate('/listPage',{
state: {
aaa: '123'
}
})
// url：http://localhost:3000/#/listPage
2、search属性携带参数：（显式传参）
const navigate = useNavigate();
navigate('listPage' + '?bbb=456')
// url：http://localhost:3000/#/listPage?bbb=456
3、路由传参携带参数：（显示传参，需要router.js中配合）
const navigate = useNavigate();
navigate('/detailPage' + '/' + id);
// 需要router.js中路由配合<Route exact path="/detailPage/:id" element={<DetailPage />} />
// 跳转新页面后 通过 const { id } = useParams();获取，其中useParams为react-router-dom 内方法
// url：http://localhost:3000/#/detailPage/789
总结
v5和v6的区别
router.js路由文件中：
1、Switch 改用 Routes
2、component/render属性 改为 element
<Route exact path="listPage" element={<ListPage />} />
3、Redirect 改用 Navigate
<Route exact path="*" element={<Navigate to="/" />} />
路由跳转、传参：
1、history.push(path) 改为 navigate(path)
2、history.replace(path) 改为 navigate(path,{replace:true})
3、history.goBack 改为 navigate(-1)
4、v5中的hook使用比较：
-v5：使用useHistory的history.push()
-v6：使用useNavigate的navigate()
