react在模块化路由中实现在router文件中的懒加载

React Router 中实现模块化的懒加载（code splitting），主要是为了提高应用性能，特别是在大型项目中，当页面包含大量组件或者第三方库时，通过按需加载可以显著减少初始加载时间。在 `react-router-dom` 中，你可以利用 `import()` 函数配合 `use lazy()` 和 `Suspense` 组件来实现。

首先，在路由配置中，你需要将需要延迟加载的组件标记为 `lazy`：

import { BrowserRouter as Router, Route, use lazy } from 'react-router-dom';
import Home from './Home'; // 非懒加载的组件
import LazyComponent from './LazyComponent'; // 懒加载的组件

function App() {
  return (
    <Router>
      {/* 使用 use lazy() 和 Suspense 包裹懒加载组件 */}
      <Route path="/lazy" component={use lazy(() => import('./LazyComponent'))} render={(props) => (
        <Suspense fallback={<div>Loading...</div>}>
          {props.component}
        </Suspense>
      )} />
      
      <Route path="/" exact component={Home} />
      {/* ...其他路由... */}
    </Router>
  );
}

每当用户导航到 `/lazy` 路径时，`LazyComponent` 会被异步导入并渲染。`Suspense` 元素会在组件未加载完成前显示一个占位符（这里是 "Loading..." 字样）。