如何部署基于React Router的应用并解决子路由访问404问题

这是React单页应用使用客户端路由的典型问题：react-router-dom的路由匹配逻辑完全在浏览器端执行，所有页面渲染都依赖入口文件index.html加载完成后运行JS代码。
直接访问子路径（比如/city）时，服务器会默认在站点目录下查找/city对应的实体文件或文件夹，找不到就直接返回404错误，根本不会加载index.html让前端路由接管匹配，自然就出现页面无法访问的问题。

所有找不到对应静态资源的请求，统一返回站点根目录的index.html，交给React Router完成路由匹配即可。不同部署环境的配置方式如下：

• Nginx 环境
  找到站点对应的Nginx配置文件，在location /规则中添加try_files配置，参考示例：

  server {
      listen 443 ssl;
      server_name yourguide.pk;
      # 替换为你React项目build后的产物存放路径
      root /data/www/yourguide/build;
      index index.html;
  
      location / {
          # 核心配置：优先匹配路径对应实体文件，不存在则返回index.html
          try_files $uri $uri/ /index.html;
      }
  }
  

  修改完成后执行nginx -t校验配置格式，再执行nginx -s reload重载配置即可生效。
• Apache 环境
  在React构建产物根目录（和index.html同级）新建或修改.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的rewrite模块，否则规则不会生效。
• 静态托管平台（Netlify/Vercel/Cloudflare Pages等）
  这类平台一般不需要改服务端配置，只需要在项目中添加对应重定向规则文件即可：
  • Netlify：在构建产物目录下新建_redirects文件，写入/* /index.html 200
  • Vercel：在项目根目录新建vercel.json，配置路径重写规则将所有请求指向index.html
  • Cloudflare Pages：在项目的Pages规则配置中，设置所有未匹配静态资源的请求回退到index.html

• 如果你不想配置服务端重写规则，可以把代码里的BrowserRouter替换为HashRouter，路由会自动带上#标识，所有路径请求都会直接打到根路径index.html，不需要额外服务端配置，但路径格式不够美观，生产环境一般不推荐。
• 你现有路由中/page not found的路径包含空格，访问时会出现URL编码问题，且已经配置了path='*'的通配符路由兜底所有未匹配路径，这个带空格的路由可以直接删除。

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