【React Router 】v6+ 的使用方法详细介绍

版本需要

React v16.8+

版本介绍，以项目结构为顺序

路由入口

import { RouterProvider } from 'react-router-dom';
<RouterProvider router={createBrowserRouter(RouterConfig)} />

// createBrowserRouter 类型声明
function createBrowserRouter(
  routes: RouteObject[],
  opts?: {
    basename?: string; //适用于无法部署到域的根目录，而是部署到子目录的情况
    window?: Window; // 适用于浏览器 devtool 插件或测试使用与全局不同的窗口
  }
);

1. createBrowserRouter 创建浏览器路由，需要后端配置ngnix， 重定向到/

2. 更改项目路由为配置文件，这样可以避免以下问题：

   • 配置文件可以存储更多的信息（图标，页面名称），在菜单配置，面包屑等地方会使用
   • 支持子路由，不需要再额外使用Route进行子路由渲染

根路由：

const RouterConfig = [
  {
    path: '/',  // 根路由
    element: <Layer />, // 根容器，需要设置Outlet 组件进行路由分发
    errorElement: <Error />, // 页面出现错误时显示该组件，可处理大部分出错的情况
    children: RouterChildrenConfigs, // 子元素
  },
];

children具体配置：

// React.lazy() 与 React.Suspense 搭配使用，可动态导入组件
const Index = React.lazy(() => import('../views/index'));
const Template = React.lazy(() => import('../views/template'));

const RouterChildrenConfigs: Array<RouteObject> = [
  { 
    index: true, // 首页
    element: <Index />, // v5版本键值是component
    handle: <span>Home</span>, // 可自定义（图标等）
  },
  {
    path: 'template', 
    element: <Template />, // 需要使用Outlet，用来显示嵌套 UI
    handle: <span>Template</span>,
    children: [ 
      {
        // 生成路径 /template/list
        path: 'list', // v5版本需要重写父级路径，不需要重写父级路径
        element: <TemplateList />,
        handle: <span>List</span>,
      },
    ],
  },
]