react-router-dom V6版本使用

一 升级对应版本

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

2. 元素升级为

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

//V5版本
import {BrowserRouter, Route, Switch} from 'react-router-dom';
    
        
           
        
    
//V6版本
import {BrowserRouter, Route, Routes} from 'react-router-dom';
    
        
          } />
        
   

二 改为

//V5版本
import { Redirect } from 'react-router-dom';
//重定向到首页
return 

//V6版本
import { Navigate } from 'react-router-dom';
//重定向到首页
return 

三 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路由嵌套

//  路由使用

  } 
        我是嵌套内容

} /> // 组件中使用 import {Outlet} from 'react-router-dom'; const Home = () => { return(

home

) } export default Home;

五 V6 useRoutes代替react-router-config

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