react-router-dom v6

一、取消Switch使用Routes

<Routes>
    {
        localRouterMap.map(item => {
        return <Route
        path={item.key}
        key={item.key}
        element={item.components}
        exact
            ></Route>
        })
	}
    <Route path="/" element={<Navigate to="/home" />} />
    <Route path="*" element={<NotPermission />}></Route>
</Routes>

二，component取消 使用element

<Route path="*" element={<NotPermission />}></Route>

三，路由重定向

取消Redirect使用Navigate代替

<Route path="/*" element={<Navigate to="/" />}></Route>

四、编程式导航

1.适用于函数组件内部

// 导入
import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
// 使用
const jumpPath = (path) => {
    navigate(path) // path路径
  }

2.props.history.goBack() 可以改为 navigate(-1)：

import { useNavigate } from "react-router";
const navigate = useNavigate();

<Header
  className="site-page-header"
  title={I18n.t("AddNew")}
  onBack={() => navigate(-1)}
/>
</Header>