【React】react-router-dom v5 与 v6 的区别

本文简单介绍两个版本的使用：v5（5.3.0） 和 v6（6.1.1）。其中：

（1）v5 版本既兼容了类组件（react v16.8前），又兼容了函数组件（react v16.8及以后，即hook）

（2）v6 文档把路由组件默认接受的三个属性给移除了，若仍然使用 this.props.history.push()，此时props会提示空值。官方文档给出的解决方案是使用 useNavigate() 这个hook，但是 hook 只能存在于函数组件，无法用在类组件中。

（3）所以，仍然使用类组件进行项目开发的，建议react-router-dom使用v5及以前的版本。
如果使用函数组件开发，建议使用最新的v6版本。

1 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.1 路由跳转

this.props.history.push('/listPage')： 路由入栈
this.props.history.replace('/listPage')：路由替换

1.2 路由返回

this.props.history.goBack(): 返回上一级路由

1.3 携带参数

（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

2 v6.1.1 在函数组件中的用法

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

2.1 路由跳转

 import { useNavigate } from 'react-router-dom';
 const navigate = useNavigate();
 // push
 navigate(path);
 // replace
 navigate(path, {replace: true});

2.2 路由返回

 const navigate = useNavigate();
 // go back
 navigate(-1);

2.3 携带参数

（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

---

3 总结

v5 和 v6 的比较：

3.1 router.js 路由文件中：

1. Switch 改用 Routes
2. component/render 属性 改为 element
   <Route exact path="/listPage" element={<ListPage />} />
3. Redirect 改用 Navigate
   <Route exact path="*" element={<Navigate to="/" />} />

3.2 路由跳转、传参：

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()

参考