React Router嵌套路由本地正常，线上部署访问/刷新出404求助

这是单页应用（SPA）部署的常见问题：本地开发时dev server会自动把所有路由请求 fallback 到index.html，但线上服务器默认会去查找对应路径的物理文件，找不到就返回404。下面是具体解决方案：

方案一：配置服务器路由重写 #

根据你使用的服务器，添加对应规则让所有请求都指向index.html：

Nginx #

修改你的Nginx配置文件（通常是nginx.conf或站点配置文件），在server块的location /中添加try_files规则：

server {
  listen 80;
  server_name your-domain.com;
  root /path/to/your/react/build/folder;

  location / {
    try_files $uri $uri/ /index.html; # 关键规则
  }
}

修改后重启Nginx生效。

Apache #

在React项目的build目录下创建.htaccess文件，添加以下内容：

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

确保Apache开启了mod_rewrite模块。

Netlify #

在项目根目录创建_redirects文件，内容如下：

/* /index.html 200

部署时这个文件会被Netlify自动识别处理。

Vercel #

在项目根目录创建vercel.json文件，添加重写配置：

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

方案二：改用HashRouter（无需服务器配置） #

如果不想修改服务器配置，可以将createBrowserRouter替换为createHashRouter，路由会通过URL的哈希部分（#）来识别，不会触发服务器的路径查找：

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

const router = createHashRouter(
  createRoutesFromElements(
    <Route path="/" element={<MainLayout />}>
      <Route path="login" element={<Login />} />
      <Route path="register" element={<Register />} />
      <Route path="chat" element={<ChatLayout />}>
        <Route path="messages" element={<ChatList />} />
        <Route path=":chatId" element={<ChatBox />} />
      </Route>
    </Route>
  )
);

注意：这种方式的URL会带有#（比如your-domain.com/#/chat/messages），对SEO有轻微影响，适合快速部署或对URL美观度要求不高的场景。

额外提醒 #

部署时确保你上传的是React项目npm run build生成的build目录下的所有文件，并且服务器的根目录指向这个build文件夹。

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