react如何实现路由懒加载
React 路由懒加载的实现方法
路由懒加载（Lazy Loading）通过动态导入（Dynamic Import）和 React 的 Suspense 组件实现，能有效减少初始加载时的资源体积。以下是具体实现方式：
使用 React.lazy 和 Suspense
React.lazy 允许动态导入组件，Suspense 提供加载中的占位内容：
import { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));
function App() {
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Suspense>
</Router>
);
}动态导入的命名导出组件
若需懒加载命名导出的组件，需通过 then 链式调用：
const Settings = lazy(() =>
import('./components/Settings').then(module => ({
default: module.SettingsPanel
}))
);预加载优化
在用户可能访问的路由前触发预加载：
const About = lazy(() => import('./components/About'));
// 鼠标悬停导航链接时预加载
<Link
to="/about"
onMouseEnter={() => import('./components/About')}
>
About
</Link>错误边界处理
结合 ErrorBoundary 捕获懒加载失败：
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() {
return { hasError: true };
}
render() {
return this.state.hasError ? <h1>Load failed</h1> : this.props.children;
}
}
// 使用方式
<ErrorBoundary>
<Suspense fallback={<Spinner />}>
<LazyComponent />
</Suspense>
</ErrorBoundary>注意事项
- 动态导入路径需为字符串字面量，不可使用变量。
Suspense的fallback需提供适当加载状态。- 生产环境下需确保打包工具（如 Webpack）支持代码分割。
