定义路由表

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";type AuthRouteObject = {needAuth?: boolean
}const router: RouteObject[] & AuthRouteObject[] = [{path: "/",element: <Home></Home>,needAuth: true,children:[{path: "/test",element: <Test/>,}]},{path: LOGIN_PATH,element: <Login></Login>},{path: "/home",element: <div>About</div>,},{path: "*",element: <NotFound></NotFound>}
]export const RenderRouters = () => {const traverseRoutes = (router: RouteObject[] & AuthRouteObject[]) => {return router.map((route: RouteObject & AuthRouteObject): ReactNode => {const element = route.needAuth ? <RouterGuard element={route.element}/> : route.elementif(Array.isArray(route.children) && route.children.length>0){return (<Route path={route.path} element={element}>{traverseRoutes(route.children)}</Route>)}return <Route path={route.path} element={element}/>})}return (<><BrowserRouter><Routes>{traverseRoutes(router)}</Routes></BrowserRouter></>)
}

定义守卫组件

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
}export const RouterGuard = (props: Props):JSX.Element | React.ReactNode => {const userStore = useUserStore()const pathName = useLocation().pathnameconst token = userStore.tokenif (!token && pathName !== LOGIN_PATH) {return <Navigate to={LOGIN_PATH} replace={true}></Navigate>}return props.element
}

使用

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