shell复制代码yarn add react-router-dom
shell复制代码routes ——index.tsx // 最终的路由文件 ——routes.tsx // 自定义路由 ——routerViews.ts // 对路由表做权限过滤数据格式转化等操作 ——RenderRoutes.tsx // 渲染路由结构
可以根据项目需求调整数据结构
typescript复制代码import React, { ReactNode } from 'react' import {Navigate} from 'react-router-dom' import PCLayout from '@/layout/PC-layout' import MLayout from '@/layout/Mobile-layout' import PCHome from '@pages/home/pc' import MHome from '@pages/home/mobile' type RouterListItem = { title?: string path: string icon?: string element?: ReactNode auth?: string children?: RouterListItem[] } const routerList: RouterListItem[] = [ { path: '/*', // auth: 'getHome@auth', element: <PCLayout />, children: [ {path: '', element: <Navigate to='home' />}, { title: '数据面板', path: 'home', element: <PCHome /> } ] }, { path: '/m/*', // auth: 'getHome@auth', element: <MLayout />, children: [ {path: '', element: <Navigate to='home' />}, { title: '数据面板', path: 'home', element: <MHome /> } ] }, ] export default routerList
对路由表做权限过滤等操作,最后抛出正确的路由结构
typescript复制代码import type { RouteObject } from "react-router-dom"; import { authRouterFilter } from '@utils/routerUtils'; import routes from './routes' export const routerViews: RouteObject[] = authRouterFilter(routes);
根据路由表,渲染路由dom
typescript复制代码import React from "react"; import { Route, Routes } from "react-router-dom"; import { routerViews } from "./routerViews"; // 写法一 // const RenderRoutes = () => { // const randerRouter = (item) => { // if (Array.isArray(item.children)) { // return ( // <Route key={item?.path} path={item?.path} element={item?.element}> // {item.children?.map((v) => randerRouter(v))} // </Route> // ); // } else { // return ( // <Route key={item?.path} path={item?.path} element={item?.element} /> // ); // } // }; // return <Routes>{routerViews?.map((v) => randerRouter(v))}</Routes>; // }; // 写法二 const RenderRoutes = () => { return useRoutes(routerViews); }; export default RenderRoutes;
typescript复制代码import React from 'react' import { BrowserRouter } from "react-router-dom"; import RenderRoutes from './RenderRoutes' const Router = () => { return ( <BrowserRouter> <RenderRoutes /> </BrowserRouter> ) } export default Router
typescript复制代码import React from "react"; import Routes from '@/routes' const App = () => { return <Routes />; }; export default App;
以上就是如何使用react-router-dom初始化路由结构
用来渲染子路由,替换之前的props.children
typescript复制代码// 原 import { useHistory } from 'react-router-dom'; ... const history = useHistory() history.push('/index1') history.replace('/index2') ... // v6 import { useNavigate } from 'react-router-dom'; ... const navigate = useNavigate(); navigate('/index1') navigate('/index2', {replace: true}) ...
typescript复制代码const routes = { path: '/', element: <SecurityLayout />, children: [ { path: '', element: <Navigate to="/user/login" /> }, // Redirect 重定向! { path: '', element: <BasicLayout />, children: [ // BasicLayout 业务页面 { path: 'index1', element: <Index1/> }, { path: 'index2', element: <Index2/> }, ] }, ] } function RenderRoutes() { const element = useRoutes(routes) return element; }