安装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;
}