React-Router-Dom v6.23.0子目录嵌套路由失效问题求助

核心原因 #

本地开发时Vite内置了SPA路由 fallback 机制，但生产服务器无默认配置，直接访问嵌套路由（如/new-mobile/dist/testfile）时，服务器会尝试寻找对应物理文件，找不到就返回错误页面。同时Vite的base配置存在路径格式问题。

修复步骤 #

1. 修正Vite的base配置 #

修改vite.config.ts中的base为绝对路径并添加结尾斜杠：

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

export default defineConfig({
  plugins: [
    react(),
    Checker({ typescript: true }),
  ],
  base: '/new-mobile/dist/' // 改为绝对路径，结尾加斜杠
})

绝对路径能避免资源加载时的相对路径解析错误，确保静态资源从正确根路径加载。

2. 配置服务器SPA Fallback #

根据生产服务器类型，添加以下配置，让所有/new-mobile/dist/*的请求都转发到/new-mobile/dist/index.html：

Nginx 配置

在站点配置中添加：

location /new-mobile/dist/ {
  try_files $uri $uri/ /new-mobile/dist/index.html;
}

Apache 配置

在new-mobile/dist目录下创建.htaccess文件并添加：

RewriteEngine On
RewriteBase /new-mobile/dist/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /new-mobile/dist/index.html [L]

静态托管平台（Netlify/Vercel）

• Netlify：在项目根目录创建_redirects文件

  /new-mobile/dist/* /new-mobile/dist/index.html 200
  

• Vercel：在项目根目录创建vercel.json文件

  {
    "routes": [
      {
        "src": "/new-mobile/dist/(.*)",
        "dest": "/new-mobile/dist/index.html"
      }
    ]
  }
  

3. 验证React Router配置 #

你的main.tsx中basename配置正确，无需修改：

const basename = '/new-mobile/dist';
const router = createBrowserRouter([
  // 路由定义保持不变
], { basename });

原理说明 #

React Router是客户端路由，所有路由逻辑在浏览器端处理。直接访问嵌套路由时，服务器先接收请求，若未配置fallback会返回404；配置后服务器将请求转发到index.html，由React Router接管路由匹配，从而正常显示页面。

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