React Router如何避免应用启动时加载所有组件？

你当前的代码是通过静态import直接导入了所有页面组件，导致应用启动时就会加载所有组件的代码。要实现仅在对应路由匹配时才加载目标组件，需要结合React的React.lazy和Suspense特性，配合react-router-dom来实现懒加载。

具体修改方案： #

1. 从React中导入lazy和Suspense工具
2. 用React.lazy()替代静态import，实现组件的动态导入
3. 用Suspense包裹路由区域，设置组件加载过程中的过渡内容

修改后的完整代码： #

import "./App.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { lazy, Suspense } from 'react';

// 动态导入组件，仅当路由匹配时才会加载对应组件的代码包
const Home = lazy(() => import('./Pages/Home'));
const TollList = lazy(() => import('./Pages/TollList'));

function App() {
  return (
    <>
      <BrowserRouter>
        {/* Suspense 用于在懒加载组件加载完成前显示过渡内容 */}
        <Suspense fallback={<div>加载中...</div>}>
          <Routes>
            <Route path="/" element={<Home />}></Route>
            <Route path="/tolllist" element={<TollList />}></Route>
          </Routes>
        </Suspense>
      </BrowserRouter>
    </>
  );
}

export default App;

核心逻辑说明： #

• React.lazy(() => import('./Pages/Home'))：这是动态导入语法，打包工具会把每个懒加载组件单独打包成chunk文件，只有当路由切换到对应路径时，才会请求并加载这个chunk文件。
• Suspense：必须包裹所有懒加载的路由组件，fallback属性可以设置加载动画、文字提示等内容，避免组件加载期间页面出现空白。

内容的提问来源于stack exchange，提问作者Pavithran Baskaran