[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>{/* 重定向不可放在首行 */}{/* <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;

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

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 中路由配合： <Route exact path="/detailPage/:id" component={DetailPage} />
// 跳转后新页面 通过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="/" />} />{/* <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();// pushnavigate(path);// replacenavigate(path, {replace: true});

2.2 路由返回

 const navigate = useNavigate();// go backnavigate(-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 中路由配合： <Route exact path="/detailPage/:id" element={<DetailPage />} />
// 跳转后新页面 通过 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
   <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()