React-Router-Dom+Nginx部署异常：/equipe/:id路径返回index.html

问题根源：访问/equipe/12345这类动态路由时，浏览器会以当前路由路径为基准请求静态资源（比如/equipe/static/js/main.xxx.js），但实际静态资源都存放在网站根目录的static文件夹下，Nginx找不到该路径，就会按try_files规则返回index.html，导致JS文件加载错误。

以下是两种可行的解决办法：

方案一：修改React项目的资源路径配置 #

在项目根目录的package.json中添加homepage字段，设置为网站根路径：

{
  "homepage": "/"
}

重新执行react-scripts build构建项目，生成的静态资源引用会变成绝对路径（比如/static/js/main.xxx.js），浏览器会直接从网站根目录请求资源，不受当前路由影响。

方案二：调整Nginx配置，优先处理静态资源 #

修改Nginx规则，先匹配静态资源请求，找不到再转发到index.html交由React Router处理：

server {
   server_name server_name_url;

   # 优先匹配静态资源请求，直接返回对应文件
   location /static/ {
       root /path/to/folder/build;
       expires 30d; # 可选，设置静态资源缓存有效期，优化加载速度
   }

   # 处理所有路由请求，非静态资源都指向index.html
   location / {
       root /path/to/folder/build;
       try_files $uri $uri/ /index.html;
   }

   listen 443 ssl; # managed by Certbot
   # other elements managed by Certbot
}

如果你的项目静态资源不在static目录（自定义了输出路径），需要对应调整location /static/的匹配规则，确保能正确定位到静态资源文件。

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