React Router + Vite动态路由预览模式加载异常求助

问题根源 #

使用BrowserRouter时，所有路由逻辑由前端JS接管，但Vite的preview服务器（及多数静态文件服务器）默认会将/tenant/xxx这类路径当作静态文件路径查找物理文件，而这类路径不存在对应文件，因此返回404。开发模式下Vite的dev server已内置SPA fallback逻辑，所以无此问题。

解决步骤 #

1. 配置Vite的SPA Fallback #

在项目根目录的vite.config.ts（或.js）中添加预览服务器的SPA fallback配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  preview: {
    // 开启SPA fallback，找不到文件时返回index.html
    historyApiFallback: true,
  },
})

补充：若需确保构建产物的路由兼容性，可同时配置build.rollupOptions指定入口为index.html，避免打包时出现路由相关的资源路径问题。

2. 优化路由配置结构（可选） #

当前路由配置功能正常，但嵌套路由结构更符合层级逻辑，也便于后续扩展：

// App.tsx
function App() {
  return (
    <div className="app">
      <Routes>
        <Route path=":tenant" element={<TenantPage />}>
          <Route path=":subscription" element={<SubscriptionPage />}>
            <Route path="manage" element={<ManageSubscriptionPage />} />
          </Route>
        </Route>
      </Routes>
    </div>
  );
}

3. 验证修复效果 #

重新执行构建与预览命令：

npm run build
npm run preview

此时直接访问/tenant/xxx/subscription/manage等深层路由即可正常加载。

额外注意事项 #

• 若部署到Nginx、Apache等生产服务器，需配置对应SPA fallback规则（如Nginx添加try_files $uri $uri/ /index.html;）
• 作为微前端子应用，需确保主应用路由配置不会与子应用路由冲突，主应用需正确转发子应用的路由请求

内容的提问来源于stack exchange，提问作者lestersconyers