v6升级踩坑实录：路由懒加载组件渲染问题排查
在React Router v6升级过程中，路由懒加载组件渲染问题是一个常见但容易忽视的坑。本文将详细记录这一问题的复现与解决过程。
问题现象
在v6中使用lazy和Suspense实现路由懒加载时，发现组件无法正常渲染，控制台报错：
Warning: React.lazy() requires a module that exports a default component.
或者出现空白页面无任何错误信息。
复现步骤
- 创建一个懒加载路由组件：
const LazyComponent = React.lazy(() => import('./components/LazyComponent'));
- 在路由中使用：
<Routes>
<Route path="/lazy" element={
<Suspense fallback="Loading...">
<LazyComponent />
</Suspense>
} />
</Routes>
- 启动应用后访问该路由路径
根本原因
主要问题出在模块导出方式上。v6中懒加载组件必须使用默认导出，而不能使用命名导出。
错误写法：
// components/LazyComponent.js
export const LazyComponent = () => <div>Lazy</div>;
正确写法：
// components/LazyComponent.js
const LazyComponent = () => <div>Lazy</div>
export default LazyComponent;
解决方案
- 确保懒加载组件使用默认导出
- 为路由包裹
Suspense组件，避免渲染错误 - 检查webpack或vite配置是否正确处理动态导入
额外建议
- 使用
useNavigateHook进行程序化导航时需注意v6的API变化 - 路由参数获取方式从
this.props.match.params变为useParams()Hook - 嵌套路由需在父路由组件中使用
Outlet组件
升级过程中建议先在开发环境测试，确保所有路由都能正常加载和渲染。
讨论