React-router-dom V6 版本新特性useNavigate代替useHistory实现路由跳转

React-router-dom V6 版本新特性

1.使用useNavigate代替useHistory实现路由跳转

如下例为点击返回按钮 navigate调整到path为‘/manageData’对应的组件， 同时通过像跳转组件传state中的值

import { useNavigate } from ‘react-router-dom’;
export default function StaffInfo() {
const navigate = useNavigate();
const toManagePage = () => {
    navigate("/manageData",{state:{value:111}});
  };
return (
  <Button
  className={`borderRadius ${style.statisticsButton} `}
  onClick={() => toManagePage()}
>
  返回
</Button>
）

组件中接收传过来的state中的值

import { useLocation } from ‘react-router-dom’;
let location = useLocation() 
console.log(location.state)

2.使用 <Routers>包裹 来替代之前版本的<switch>

v6:

v5:

若文中有误，望大佬指正