基于React Router6 TS实现路由守卫

定义路由表

import {BrowserRouter, Route, RouteObject, Routes,} from "react-router-dom";
import {Home, Login, NotFound} from "@/views";
import {RouterGuard} from "@/routers/router_guard.tsx";
import {ReactNode} from "react";
import {Test} from "@/views/test/test.tsx";
import {LOGIN_PATH} from "@/utils/constant";
import {Broken} from "@/views/Broken/broken.tsx";
type AuthRouteObject = {
    needAuth?: boolean
}
const router: RouteObject[] & AuthRouteObject[] = [
    {
        path: "/",
        element: ,
        needAuth: true,
        children:[
            {
                path: "/test",
                element: ,
            }
        ]
    },
    {
        path: LOGIN_PATH,
        element: ,
        needAuth:true
    },
    {
        path:"/500",
        element:
    },
    {
        path: "*",
        element: 
    }
]
export const RenderRouters = () => {
    const traverseRoutes = (router: RouteObject[] & AuthRouteObject[]) => {
        return router.map((route: RouteObject & AuthRouteObject): ReactNode => {
            const element =  route?.needAuth} element={route.element}/
            if(Array.isArray(route.children) && route.children.length>0){
                return (
                    route.path} element={element} key={route.path}
                        {traverseRoutes(route.children)}
                    
                )
            }
            return route.path} element={element} key={route.path}/
        })
    }
    return (
        
            
                
                    {traverseRoutes(router)}
                
            
        
    )
}

定义守卫组件

import {PropsWithChildren, ReactNode} from "react";
import {useUserStore} from "@/store/user_store";
import {Navigate, useLocation} from "react-router-dom";
import {LOGIN_PATH} from "@/utils/constant";
interface Props extends PropsWithChildren {
    element: JSX.Element | ReactNode
    needAuth?:boolean
}
export const RouterGuard = (props: Props): JSX.Element | React.ReactNode => {
    const userStore = useUserStore()
    const pathName = useLocation().pathname
    const token = userStore.token
    if (!props.needAuth){
        return props.element
    }
    if (token && pathName == LOGIN_PATH){
        return 
    }
    if (!token && pathName !== LOGIN_PATH) {
        return LOGIN_PATH} replace
    }
    return props.element
}

使用

import './App.css'
import {RenderRouters} from "@/routers/router.tsx";
function App() {
    return (
        
            
        
    )
}
export default App

效果展示