react-router-dom动态URL本地正常，build后访问返回空白页如何解决？

问题根本原因 #

你遇到的是单页应用客户端路由的典型问题：BrowserRouter依赖H5 History API实现路由跳转，本地开发时webpack-dev-server默认配置了所有请求回退到index.html，所以运行正常；但生产环境的服务器默认会尝试匹配路径对应的真实静态文件，你的应用只有根目录的index.html，找不到对应路径的文件就会返回404空白页。

解决方案 #

方案1：保留BrowserRouter，配置服务端路由回退 #

所有请求都重定向到根目录的index.html，由React Router接管路由匹配，不同部署环境的配置如下：

• Nginx部署：在Nginx配置文件的server块中添加如下规则

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

• Apache部署：在项目public目录下新建.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>

• Netlify部署：在项目public目录下新建_redirects文件，写入以下内容

/* /index.html 200

• Vercel部署：在项目根目录新建vercel.json文件，写入以下内容

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

方案2：正确使用HashRouter #

如果不想改服务端配置，使用HashRouter是更简单的方案，但要注意以下两点：

1. 替换BrowserRouter为HashRouter后，必须重新执行build命令生成新的生产包再部署，不要用旧的构建产物
2. HashRouter生成的路径会自带#前缀，你需要把取消订阅的链接格式改成域名/#/cancelar/newsletter/邮箱地址，直接访问不带#的旧路径仍然会404

其他排查方向 #

如果上面的方案都不生效，可以按以下步骤排查：

• 检查package.json中的homepage配置：如果你的应用没有部署在域名根目录，需要将homepage设置为你的应用部署路径，比如部署在https://xxx.com/currency-tool/，就设置"homepage": "/currency-tool/"
• 打开生产环境的浏览器控制台，检查是否有js/css静态资源加载失败的404报错，如果有说明静态资源引用路径配置错误，和路由本身无关
• 可以在路由列表最后添加404兜底路由，确认请求是否走到了React Router的匹配逻辑里：

<Route path="*" render={() => <h1>404 页面不存在</h1>} />

如果访问路径能显示这个404内容，说明服务端回退配置已经生效，问题出在你自己的路由规则匹配逻辑上。

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