前言

在v5和v6的路由配置之间有比较大的区别下文主要是针对useRoutes函数式写法,下文主要是TS写法如不是删除对应即可。

router/setting.js

import React, { lazy } from "react";
// 声明类型
export interface SyncRoute {
  path: string;
  component: React.LazyExoticComponent<any>;
  children?: Array<SyncRoute>;
  meta?: {
    title?: string;
    needLogin?: boolean;
  };
}

const RouteTable: Array<SyncRoute> = [
  {
    path: "/",//一级路由
    component: lazy(() => import("@/views/index")),
    children: [//二级路由
      {
        path: "",//为空则默认显示该路由
        component: lazy(() => import("@/views/home/index/index")),
      },
      {
        path: "index",
        component: lazy(() => import("@/views/home/index/index")),
        meta: {
          title: "首页",
        },
      }
      }
    ],
  },
  {
    path: "*",//404页面
    component: lazy(() => import("@/components/notFound")),
  },
];

export default RouteTable;

router/index.js

import { Suspense, useEffect } from "react";
import { useRoutes, RouteObject, useNavigate } from "react-router-dom";
import { Spin } from "antd";

import RouteTable, { SyncRoute } from "./setting";

//懒加载处理
const syncRouter = (routes: Array<SyncRoute>): RouteObject[] => {
  let mRouteTable: RouteObject[] = [];
  routes.forEach((route) => {
    mRouteTable.push({
      path: route.path,
      element: (
        <Suspense
          fallback={
            <div className="h-full flex justify-center items-center">
              <Spin tip="Loading" size="large" />
            </div>
          }
        >
          <RequireAuth route={route}>
            <route.component />
          </RequireAuth>
        </Suspense>
      ),
      children: route.children && syncRouter(route.children),
    });
  });
  return mRouteTable;
};
//路由拦截
const RequireAuth = (props: { route: any; children: any }) => {
  if (props?.route?.meta?.title) {
    document.title = props.route.meta.title;
  }

  if (props?.route?.meta?.needLogin) {
    // 看是否登录
    const navigate = useNavigate();
    useEffect(() => {
     navigate('/');
    })
  }
  return props.children;
};

export default () => useRoutes(syncRouter(RouteTable)); //暴露为一个函数