[React] react-router-dom的v5和v6

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.在类组件中的用法

import React from "react";
import { Router, Route, Switch, Redirect, HashRouter } from "react-router-dom";
import { createHashHistory } from "history";
...

const route = () => (
  <HashRouter>
    <Switch>
      {/* 重定向不可放在首行 */}
      {/*  */}
      <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;

注意： 和 的区别 ==> 似乎没有区别

1.1 路由跳转

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

1.2 路由返回

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

1.3 携带参数

1.3.1 state 属性携带参数

http://localhost:3000/#/listPage

this.props.history.push({
  pathname: '/listPage',
  state: {
    aaa: 123
  },
});
// 跳转后新页面 通过 this.props.history.location.state 获取
// http://localhost:3000/#/listPage

1.3.2 search 属性携带参数

·http://localhost:3000/#/listPage?bbb=456

this.props.history.push({
  pathname: '/listPage',
  search: '?bbb=456',
});
// 跳转后新页面 通过 this.props.history.location.search 获取
// url: http://localhost:3000/#/listPage?bbb=456

1.3.3 路由传参 携带参数

http://localhost:3000/#/detailPage/789

this.props.history.push({
  pathname: '/detailPage' + '/' + id,
});
// 需要router.js 中路由配合： 
// 跳转后新页面 通过this.props.match.params.id 获取
// url: http://localhost:3000/#/detailPage/789

2.在函数组件中的用法

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="/" />} />
      {/* } /> */}
    </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 携带参数

2.3.1 state 属性携带参数

http://localhost:3000/#/listPage

 const navigate = useNavigate();
 navigate('/listPage', {
   state: {
     aaa: '123',
   }
 })
 // url: http://localhost:3000/#/listPage

2.3.2 search 属性携带参数

http://localhost:3000/#/listPage?bbb=456

 const navigate = useNavigate();
 navigate('/listPage' + '?bbb=456')
 // url: http://localhost:3000/#/listPage?bbb=456

2.3.3 路由传参 携带参数

http://localhost:3000/#/listPage/456

 const navigate = useNavigate();
 navigate('/detailPage' + '/' + id)
// 需要router.js 中路由配合： } />
// 跳转后新页面 通过 const { id } = useParams(); 获取，其中useParams 为 react-router-dom 内方法
// url: http://localhost:3000/#/detailPage/789

3.总结

3.1 3.1 router.js 路由文件中

1. Switch 改用 Routes
2. component/render 属性 改为 element
   } />
3. Redirect 改用 Navigate
   } />

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