v6路由懒加载失败问题排查：代码分割配置错误分析

最近在将项目从React Router v5升级到v6时，遇到了一个棘手的路由懒加载问题。按照官方文档配置后，发现组件无法正确加载，控制台报错提示模块未找到。

问题复现步骤

// 错误的配置方式
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback="Loading...">
        <Routes>
          <Route path="/lazy" element={<LazyComponent />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

根本原因分析

经过排查发现，问题出在webpack配置上。v6版本对代码分割的处理机制有所改变，需要确保以下几点：

确保webpack配置中chunkFilename设置正确
React.lazy导入路径必须是静态字符串
服务端渲染环境下需要特殊处理

解决方案

// 正确的配置方式
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route 
          path="/lazy" 
          element={
            <Suspense fallback="Loading...">
              <LazyComponent />
            </Suspense>
          } 
        />
      </Routes>
    </BrowserRouter>
  );
}

关键在于将Suspense提升到路由层级，避免在v6中出现的上下文问题。