React静态Web应用部署后路由直接访问404问题排查与修复

问题本质 #

你使用的BrowserRouter依赖HTML5 History API实现前端路由。本地开发服务器（比如Create React App的dev server）默认配置了路由 fallback：所有找不到的资源都会转发到index.html，由前端路由处理。但生产环境的静态服务器不会自动做这件事，直接访问子路由（比如abc.com/ManageMembership）时，服务器会尝试寻找对应路径的物理文件，找不到就返回404；而通过UI按钮跳转是前端路由在客户端处理，不会触发服务器请求，所以能正常工作。

修复方法 #

方案1：配置服务器路由转发（推荐，URL更干净） #

根据你部署的服务器类型，添加对应的配置，让所有请求都 fallback 到index.html：

Nginx

修改Nginx配置文件，在对应server块里添加：

location / {
  try_files $uri $uri/ /index.html;
}

重启Nginx生效。

Apache

在项目根目录创建.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

Vercel

在项目根目录创建vercel.json文件，写入：

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

方案2：改用HashRouter（无需服务器配置，URL带#） #

如果不想修改服务器配置，可以把BrowserRouter替换成HashRouter，路由会以#分隔，比如abc.com/#/ManageMembership，服务器只会解析/路径，后面的hash部分由前端处理：

修改index.ts里的路由组件：

import { HashRouter } from 'react-router-dom';

// 替换原来的BrowserRouter
ReactDOM.render(
  <ThemeProvider>
    <React.StrictMode>
      <Provider store={store}>
        <HashRouter>
          <Routes>
            {/* 原有路由配置不变 */}
          </Routes>
        </HashRouter>
      </Provider>
    </React.StrictMode>
  </ThemeProvider>,
  document.getElementById('root')
);

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