SHIMMER
初始化react-router-dom v6
前端|react
发布于2023-04-27 最近修改2023-04-27
349
0
Shimmer

安装react-router-dom

shell
复制代码
yarn add react-router-dom

在src下新建routes目录

shell
复制代码
routes ——index.tsx // 最终的路由文件 ——routes.tsx // 自定义路由 ——routerViews.ts // 对路由表做权限过滤数据格式转化等操作 ——RenderRoutes.tsx // 渲染路由结构

routes.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

routerViews文件

对路由表做权限过滤等操作,最后抛出正确的路由结构

typescript
复制代码
import type { RouteObject } from "react-router-dom"; import { authRouterFilter } from '@utils/routerUtils'; import routes from './routes' export const routerViews: RouteObject[] = authRouterFilter(routes);

RenderRoutes文件

根据路由表,渲染路由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;

index文件

typescript
复制代码
import React from 'react' import { BrowserRouter } from "react-router-dom"; import RenderRoutes from './RenderRoutes' const Router = () => { return ( <BrowserRouter> <RenderRoutes /> </BrowserRouter> ) } export default Router

在App.tsx内引入路由

typescript
复制代码
import React from "react"; import Routes from '@/routes' const App = () => { return <Routes />; }; export default App;

以上就是如何使用react-router-dom初始化路由结构

v6版本相对于之前的变化

路径的变化

  • 占位符 * 和 :id可以用,正则不能用了
  • v6中的所有路径匹配都将忽略URL上的尾部"/"

<Switch>重命名为<Routes>

<Route>的component变成了element

<Outlet>渲染子路由

用来渲染子路由,替换之前的props.children

去掉了useHistory,用useNavigate作为替代,页面跳转写法改变

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}) ...

<Redirect/>重命名为<Navigate/>

新增了useRoutes,可以替代react-router-config

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; }
目录