react-router-dom v6.0.2 下使用React.lazy语法实现路由懒加载相关问题

你给出的代码核心逻辑可以实现路由懒加载，但缺少必要的 Suspense 包裹，直接运行会报错。

你对组件调用时机的理解存在偏差：

• React.lazy(() => import("./A")) 只会生成一个懒加载组件的包装器，不会立刻执行 import 加载组件代码。
• 你传入 element 属性的 <A /> 本质上只是一个JSX元素对象，并没有触发组件的渲染执行。react-router-dom v6 只会在路由匹配到对应 path 时，才会真正渲染 element 内的组件，此时才会触发 React.lazy 内的 import 逻辑拉取对应组件的资源，完全符合懒加载的要求。

React 规定 React.lazy 返回的组件必须在 <Suspense> 组件包裹下渲染，你需要补充加载 fallback 配置：

import { Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';

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

function App() {
  return (
    {/* fallback 可自定义为任意加载态组件 */}
    <Suspense fallback={<div>页面加载中...</div>}>
      <Routes>
        <Route path="firstPath" element={<A />} />
        <Route path="secondPath" element={<B />} />
      </Routes>
    </Suspense>
  )
}

你可以对项目进行生产构建，会看到A、B组件被单独拆分为独立的chunk资源，只有访问对应路由时才会发起请求拉取对应资源。

内容的提问来源于stack exchange，提问作者alireza binesh