v6部署配置：生产环境路由优化实战

React Router v6的升级带来了不少变化，特别是在生产环境部署时需要特别注意配置优化。最近在项目中进行v6升级时，遇到了几个典型的配置问题。

路由配置重构

首先，v6取消了<Switch>组件，改用<Routes>。但在生产环境中，我们需要确保所有路由都正确匹配。建议使用以下配置：

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

生产环境路径问题

在部署到生产环境时，发现路由无法正常匹配。这是因为v6默认使用basename参数。需要在配置中明确设置：

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />, 
    children: [
      { path: "home", element: <Home /> },
      { path: "about", element: <About /> }
    ]
  }
], {
  basename: process.env.NODE_ENV === 'production' ? '/myapp' : '/'
});

预渲染优化

为了提升SEO表现，我们采用了预渲染策略。在构建脚本中添加了：

"build": "react-scripts build && npm run prerender"

通过这些配置调整，在生产环境部署后，路由跳转流畅度和SEO表现都有明显改善。

MadQuincy · 2026-01-08T10:24:58

v6的路由重构确实省去了Switch，但生产环境的basename配置才是关键，别忘了nginx也得同步设置，不然静态资源加载就炸了。

GoodStone · 2026-01-08T10:24:58

预渲染策略听起来不错，但别只盯着SEO，实际用户访问时的首屏渲染性能才是硬道理，建议加个React.lazy配合代码分割。

Ian553 · 2026-01-08T10:24:58

路由匹配逻辑改了之后，404页面要特别测试，尤其是嵌套路由场景，很多团队都踩坑在‘*’路径没放最后导致匹配失效。

BoldNinja · 2026-01-08T10:24:58

生产环境部署前必须做一遍完整的路由链路测试，特别是多级菜单和动态参数场景，否则上线后用户反馈的跳转问题会很头疼

v6部署配置：生产环境路由优化实战