React项目刷新子菜单页面出现404错误的解决求助

问题原因分析 #

1. 路由路径不匹配：你的子菜单链接是三级路径（/父菜单标识/子菜单标识/子菜单ID），但当前路由配置仅定义了两级路径（/:menuLabel/:menuId），导致刷新时路由无法匹配对应组件。
2. SPA服务器路由特性：React是单页应用（SPA），客户端路由仅在浏览器端生效。刷新页面时，浏览器会直接向服务器请求对应路径的资源，而服务器上不存在该路径的静态文件，因此返回404。

分步解决方案 #

1. 修正路由路径匹配 #

将路由配置调整为与子菜单链接对应的三级路径：

{
  path:'/:parentMenuLabel/:subMenuLabel/:subMenuId',
  loader: async({ params }) => {
    return params;
  },
  element: <BoardResult/>
}

如果子菜单和父菜单是嵌套路由结构，需确保父路由配置正确，并在父组件中使用<Outlet/>渲染子路由内容。

2. 服务器端配置（核心解决刷新404） #

根据你的部署环境，配置服务器将所有请求转发到index.html，让React Router接管客户端路由：

开发环境（Create React App）

在项目根目录的package.json中添加：

"homepage": "."

重启开发服务器后即可解决刷新404问题。

生产环境（Nginx）

修改Nginx配置文件（如nginx.conf），在location /块中添加try_files规则：

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

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

重启Nginx服务生效。

生产环境（Apache）

在项目根目录创建.htaccess文件，添加以下规则：

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

确保Apache启用了mod_rewrite模块。

生产环境（Netlify/Vercel）

• Netlify：在项目根目录创建_redirects文件，内容为：

  /* /index.html 200
  

• Vercel：在项目根目录创建vercel.json文件，内容为：

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

内容的提问来源于stack exchange，提问作者Fazlul Hoque Sawrav