react-router-dom6 路由懒加载与组件懒加载

react-router-dom6 路由懒加载与组件懒加载

本文教学如何配置最新路由的懒加载 以及 组件懒加载

组件懒加载

组件引入方式

需要用到懒加载的组件：此时我这个组件默认是关闭的，类似于弹窗之类的，就需要最好做一个懒加载

再配置一个过渡组件，就是等待我们懒加载的组件还没过来时运行此组件
我这边是配置在index.tsx里面

这样就实现了组件懒加载，在我们需要将该组件懒加载的时候就采用lazy的方式导入即可

路由懒加载

有了组件懒加载在index.tsx中配置的过渡组件，我们这同样可以复用
如果我们不想用也可以自己定制Suspense，嵌套在路由组件前即可如 lztest
route index.tsx

import { lazy, Suspense } from "react";
import { Navigate } from "react-router-dom";

// React 组件懒加载
const TodoList = lazy(() => import("../commponet/TodoList"));
const LazyTest = lazy(() => import("../page/LazyTest"));

interface Router {
  name?: string;
  path: string;
  children?: Array<Router>;
  element: any;
}

const routes: Array<Router> = [
  {
    path: "/tsdemo",
    element: <TodoList />,
  },
  {
    path: "/lztest/:name/:age/:sex",
    // element: <LazyTest />,
    element: (
      <Suspense fallback={<h2>加载中....</h2>}>
        <LazyTest />
      </Suspense>
    ),
  },
  {
    path: "/",
    element: <Navigate to="/tsdemo" />,
  },
];

export default routes;

测试结果

先降低网速

刷新

点击控制懒加载组件显示
我们会发现此时会加载一个文件，这个文件就是对应的懒加载文件
说明我们成功实现了懒加载

点击切换路由
第一个是加载组件的懒加载文件
第二个是加载路由组件的懒加载文件

成功！