react-router-dom在hook中的使⽤v6和v5的对⽐
前⾔
react-router-dom 是react中通⽤的路由组件，随着新版本的更新，尤其是为了配合 react hook 的 v6版本，已经在使⽤上有了较⼤的变化，本⽂旨在对⽐旧版本（v5），以及介绍新版本的使⽤
react-router-dom 的版本介绍
本⽂使⽤的两个版本： v5(5.3.0) 和 v6(6.1.1)
其中：
v5版本既兼容了 class component（react v16.8前），⼜兼容了function component(v16.8及以后，即hook)
v6版本，若仍然使⽤this.props.history.push()，此时props会提⽰是空值，v6⽂档⾥把路由组件默认接受的三个属性给移除了，官⽹⽂档⾥给出的解决⽅案是使⽤useNavigate()这个hook，但是hook只能存在于⽆状态组件（function component），⽆法⽤在类组件中（class component）
所以，仍然使⽤class commponent（类组件）进⾏项⽬开发的，建议react-router-dom 使⽤v5及以前的版本（最新的v5版本是 v5.3.0）
如果使⽤ 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>的区别 ==> 似乎没有区别
路由跳转：
this.props.history.push('/listPage')：路由⼊栈
this.place('/listPage')：路由替换
路由返回：
this.Back();: 返回上⼀级路由
携带参数：
state属性携带参数：（隐式传参）
this.props.history.push({
pathname: '/listPage',
state: {
aaa: 123
},
});
// 跳转后新页⾯通过 this.props.history.location.state 获取
// localhost:3000/#/listPage
search属性携带参数：（显式传参）
this.props.history.push({
pathname: '/listPage',
search: '?bbb=456',
});
// 跳转后新页⾯通过 this.props.history.location.search 获取
/
/ url: localhost:3000/#/listPage?bbb=456
路由传参携带参数：（显式传参，需要router.js 中配合）
this.props.history.push({
pathname: '/detailPage' + '/' + id,
});
// 需要router.js 中路由配合： <Route exact path="/detailPage/:id" component={DetailPage} />
// 跳转后新页⾯通过this.props.match.params.id 获取
// url: 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
react router路由传参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);
携带参数：
state属性携带参数：（隐式传参）
const navigate = useNavigate();
navigate('/listPage', {
state: {
aaa: '123',
}
})
// url: localhost:3000/#/listPage
search属性携带参数：（显式传参）
const navigate = useNavigate();
navigate('/listPage' + '?bbb=456')
// url: localhost:3000/#/listPage?bbb=456
路由传参携带参数：（显式传参，需要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: 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. place(path) 改为 navigate(path, {replace: true})
3. Back() 改为 navigate(-1)
4. v5 中的 hook 使⽤⽐较：
-v5：使⽤ useHistory 的 history.push()
-v6：使⽤ useNavigate 的 navigate()
参考