如何使用反应位置延迟加载路线？

Question

我对 React 很陌生，我有一个项目使用 react-location

我想只在路径激活时才延迟加载一些路由。

我当前的配置是：

我的基本路由模块

export const routes: Route[] = [
  ...HomeModuleRoutes, // I want this to be instantly loaded.
  ...LazyRoutes, // I want this to be lazy loaded.
  { path: '/', element: <Navigate to="/home" /> },
];

这 2 个常量如下所示：

home.routing.ts

export const routes: Route[] = [
  {
    path: 'home',
    element: <HomeTemplate />,
    children: [
      {
        path: '/',
        element: <HomePage />,
      },
    ],
  },
];

lazy.routing.ts

export const LazyRoutes: Route[] = [
  {
    path: 'test',
    element: <LazyTemplate />,
    children: [
      {
        path: '/',
        element: <LazyList />,
      },
      {
        path: 'add',
        element: <LazyAdd />,
      },
      {
        path: 'detail',
        element: <LazyDetail />,
      },
    ],
  },
];

我不太了解这方面的文档或示例，它只是用 <Suspense> 包装组件吗？

Answer 1

您应该使用 React.lazy 导入您的组件，例如：

const HomeTemplate = React.lazy(() => import("./HomeTemplate "));

检查此示例是否适用于 react-router v6 lazy loading

如何使用反应位置延迟加载路线？

How to lazy load route with react location?

lazy-loading

reactjs

react-router

react-suspense

react-location