从v5到v6：React Router代码分割踩坑记录

从v5到v6：React Router代码分割踩坑记录

最近项目中将React Router从v5升级到了v6，过程中遇到了不少问题，特别是代码分割部分。本文记录了升级过程中的关键踩坑点。

升级前的v5配置

在v5中，我们使用<Route>组件配合component或render属性来实现路由渲染，代码分割通过动态导入实现：

import { Route } from 'react-router-dom'
const Home = React.lazy(() => import('./components/Home'))

<Route path="/" exact>
  <Suspense fallback="Loading...">
    <Home />
  </Suspense>
</Route>

v6的显著变化

v6中，<Route>组件的API发生了重大改变。最核心的变化是：

1. 不再支持嵌套路由，需要使用useRoutes或Routes组件
2. 路由配置方式改变，component属性被移除
3. 代码分割实现方式调整

代码分割的坑点

在v6中，我们需要这样重构代码：

// v6正确写法
import { Routes, Route } from 'react-router-dom'
import { Suspense } from 'react'

const Home = React.lazy(() => import('./components/Home'))
const About = React.lazy(() => import('./components/About'))

function App() {
  return (
    <Suspense fallback="Loading...">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  )
}

实际踩坑经验

1. 必须包裹在Suspense中：v6中代码分割必须使用Suspense包装，否则会报错
2. element属性替代component：v6中使用element属性来传递组件
3. 路由层级结构调整：原v5的嵌套路由需要重构为扁平化的结构

总结

升级过程中虽然遇到了不少问题，但v6的API设计更加现代化。建议在升级前先梳理好现有路由结构，避免代码分割出现意外情况。