lazy

为了使你的应用程序包体积更小并支持路由的代码分割，每个路由都可以提供一个异步函数，该函数解析路由定中不匹配路由的部分（如loader、action、Component/element、ErrorBoundary/errorElement等）。

每个lazy函数都会返回一个动态导入的结果。

const router = createBrowserRouter([
  {
    path: "/",
    element: <App/>,
    children: [
      {path: '/', lazy: () => import( "@/pages/home")},
      {path: "/about", lazy: () => import( "@/pages/about")},
      {path: "/profile", lazy: () => import( "@/pages/profile")},
      {path: "/*", element: "404页面"}
    ]
  },
])

然后在你需要进行懒加载的路由模块中，导出你想要为路由定义的属性：

export async function loader({request, context}: LoaderFunctionArgs) {
  return {}
}

export async function action({request, context}: LoaderFunctionArgs) {
  return {}
}

export const Component = () => {
  return (
    <div>
      <h1>welcome</h1>
    </div>
  );
};

export const ErrorBoundary = () => {
  return "组件渲染异常"
}

单个文件中存放多个路由

虽然lazy在绝大多数情况下是与每个路由的异步import()一对一使用的，但是你实现更高级的lazy函数。例如，如果你想避免嵌套路由加载多个模块，你可以将这些异步模块全部存储在同一个文件中，并将它们返回给各个路由。

当组合一些简单的路由组件时，这个方案是最为合适不过的了，你不必为每一个小组件创建一个单独的文件来存储这些数据。