React 路由权限跳转 Token判断 路由控制 登录状态控制

封装路由组件

import {Navigate} from "react-router-dom";export function AutoRote({children}){const token =getToken()if(token){ //已经登录return <>{children}</>}else{  //未登录return <Navigate to={'/login'} replace ></Navigate>}
}function getToken(){return '模拟token'
}

使用

import User from "../view/User";
import Login from "../view/Login";import {createBrowserRouter} from "react-router-dom";
import Info from "../view/User/Info";
import NotFound from "../view/System/404";
import {AutoRote} from "../components/AuthRoute";const router = createBrowserRouter([{path: "/",element: <Login></Login>, // 默认路由重定向到 /login},,{path:'/login',element:<Login></Login>
},{   path:'/user',element:<User></User>,children:[{// path:'info',index:true,element: <AutoRote><Info></Info></AutoRote>}]},{path:'*',element:<NotFound></NotFound>}
,])export default router