Reactjs + Vitejs多页面应用嵌套路由刷新fallback至主入口问题

问题根源 #

刷新次级应用嵌套路由时，服务器默认将请求转发到主入口index.html，而非次级应用的入口文件，导致React Router无法解析对应路由，出现404。

解决方案 #

1. 确保Vite多入口打包配置正确 #

在vite.config.ts中配置多入口，保证打包后主、次级应用的入口文件分别输出：

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

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: {
        main: './index.html',
        secondary: './secondary/index.html'
      }
    }
  }
})

2. 开发环境：配置Vite服务器路由转发 #

通过server.historyApiFallback规则，让所有次级应用路由请求转发到次级入口文件：

// 追加到vite.config.ts的server配置中
server: {
  historyApiFallback: {
    rewrites: [
      { from: /^\/secondary\/.*$/, to: '/secondary/index.html' },
      { from: /^\/.*$/, to: '/index.html' }
    ]
  }
}

3. 次级应用路由设置basename #

在次级应用的Router组件中指定basename="/secondary"，确保React Router的路由解析基于次级路径：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import SecondaryHome from './components/SecondaryHome'
import Dashboard from './components/Dashboard'

function SecondaryApp() {
  return (
    <Router basename="/secondary">
      <Routes>
        <Route path="/" element={<SecondaryHome />} />
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </Router>
  )
}

export default SecondaryApp

4. 生产环境：服务器配置路由 fallback #

以Nginx为例，配置try_files规则，让次级应用路径的请求 fallback到次级入口：

server {
  listen 80;
  root /path/to/your/dist/folder;

  # 主应用路由处理
  location / {
    try_files $uri $uri/ /index.html;
  }

  # 次级应用路由处理
  location /secondary/ {
    try_files $uri $uri/ /secondary/index.html;
  }
}

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