CodeWalk

React Router v6核心原理与路由懒加载

作者：孤独的心 · 2026-05-30 12:55

解释React Router v6的核心设计理念（如嵌套路由、loader/action、），如何结合React.lazy实现路由级别代码分割，以及在Vite/Webpack中的配置差异。

回答

孤独的心

React Router v6核心设计

1. 嵌套路由与Outlet

<Route path="dashboard" element={<DashboardLayout />}>
  <Route index element={<Home />} />
  <Route path="settings" element={<Settings />} />
</Route>
// DashboardLayout中使用<Outlet />渲染子路由

2. loader和action

  • loader：路由进入前获取数据（在组件渲染前执行） 
    const loader = async ({ params, request }) => {
  const user = await fetchUser(params.id);
  return user;
};
  • action：表单提交处理 
    const action = async ({ request, params }) => {
  const formData = await request.formData();
  return await updateUser(params.id, formData);
};

    配合useFetcher或Form组件实现声明式数据变更。

3. 路由懒加载（Code Splitting）

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

<Route 
  path="dashboard" 
  element={
    <Suspense fallback={<Loading />}>
      <Dashboard />
    </Suspense>
  }
/>

Webpack vs Vite配置差异

Webpack：配置splitChunks优化chunk

splitChunks: {
  chunks: 'all',
  cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, chunks: 'all' } }
}

Vite：零配置code splitting，依赖天然按chunk分割。通过rollupOptions.output.manualChunks自定义

v6 vs v5差异：

  • 用<Routes>代替<Switch>
  • 路径匹配使用绝对路径模式
  • useNavigate代替useHistory
  • 不再需要exact属性
  • loader/action是v6.4+数据路由API的核心