初始化react-router-dom v6
前端|react
发布于2023-04-27 最近修改2023-12-22
868
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版本相对于之前的变化

Route 路径的变化

  • 占位符 * 和 :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; }
目录