react-router-dom V6版本使用

一 升级对应版本

1. 升级到 React v16.8 或更高版本
2. 升级到 React Router v5.1
3. 升级到 React Router v6
   具体使用参考官网

2. <Switch>元素升级为<Routes>

在v6中，component属性被替换成了element,并且需要传入组件

//V5版本
import {BrowserRouter, Route, Switch} from 'react-router-dom';
    <BrowserRouter>
        <Switch>
          <Route path="/" > <Home /></Route>
        </Switch>
    </BrowserRouter>
//V6版本
import {BrowserRouter, Route, Routes} from 'react-router-dom';
    <BrowserRouter>
        <Routes>
          <Route path="/" exact element={<Home/>} />
        </Routes>
   </BrowserRouter>

二 <Redirect>改为<Navigate>

//V5版本
import { Redirect } from 'react-router-dom';
//重定向到首页
return <Redirect to="/home" />

//V6版本
import { Navigate } from 'react-router-dom';
//重定向到首页
return <Navigate to="/home" />

三 useNavigate替代useHistory使用

//V5版本
import { useHistory } from "react-router-dom";
const history = useHistory();
history.push("/home"); // 跳转路由
history.go();
history.goback();
history.location;
history.replace();
//V6版本
import {useNavigate} from 'react-router-dom';
const navigate = useNavigate();
navigate("/home"); // 跳转路由
navigate('/home', {replace: true});
navigate(-1);  //后退
navigate(1); //前进

四 V6路由嵌套

//  路由使用
<Routes>
  <Route path='/home/*'  element={<Home />} 
        <Route path='home-page' element={<div>我是嵌套内容</div>} />
  <Route/>
</Routes>
// 组件中使用

import {Outlet} from 'react-router-dom';
const Home = () => {
    return(
        <div>
      <h1>home</h1>
      <Outlet />
    </div>
         )  
}
export default Home;

五 V6 useRoutes代替react-router-config

export const routes = [
    {
        path: '/',
        element: <Layout />,
        children: [
            {
                path: 'home',
                meta: {
                    title: '首页',
                    icon: ‘’,
                },
                children: [
                    {
                        path: 'homepage1',
                        element: <Homepage />,
                        meta: {
                            title: 'homepage1',
                        }
                    }
                ]
            }
        ]
    },
    {
        path: '/login',
        element: <Login />,
        meta: {
            title: '登录',
            hideMenu: true
        }
    },
    {
        path: '*',
        element: <Page404 />,
        meta: {
            title: '404',
            hideMenu: true
        }
    },
];
const Routes = () => (
    useRoutes(routes)
)
export default Routes;