react-router-dom v6 路由懒加载.

核心语法:

1.将核心语法封装成一个函数.

const lazyComponent = (importComp: () => any) => {
  const Comp = React.lazy(importComp);
  return (
    <Suspense fallback={<div>loading...</div>}>
      <Comp></Comp>
    </Suspense>
  );
};

2.在路由element项使用:

{
   path: "/login",
   element: lazyComponent(() => import("@/views/authorized/Login/Login")),
},

3.完整代码展示...

import { DataRouteObject, Navigate } from "react-router-dom";
import PageRouteLayout from "./components/PageRouteLayout/PageRouteLayout";
import React, { Suspense } from "react";
const lazyComponent = (importComp: () => any) => {
  const Comp = React.lazy(importComp);
  return (
    <Suspense fallback={<div>loading...</div>}>
      <Comp></Comp>
    </Suspense>
  );
};
export const authorized = () => {
  return [
    {
      path: "/",
      element: <Navigate to={"/login"}></Navigate>,
    },
    {
      element: <PageRouteLayout></PageRouteLayout>,
      children: [
        {
          path: "/login",
          element: lazyComponent(
            () => import("@/views/authorized/Login/Login")
          ),
        },
        {
          path: "/register",
          element: lazyComponent(
            () => import("@/views/authorized/Register/Register")
          ),
        },
      ],
    },
  ] as DataRouteObject[];
};