React应用通过URL直接访问带参数动态路由页面空白如何解决

你遇到的是React客户端路由的典型适配问题，按以下步骤依次排查即可解决：

1. 优先排查静态资源引用路径问题 #

大部分动态路由空白场景都是打包后的资源引用路径错误导致：

• 如果你在index.html里用了相对路径引用js/css资源（比如<script src="./static/js/main.xxxx.js"></script>），访问/view-category-details/0这类多级路径时，浏览器会错误地请求/view-category-details/static/js/main.xxxx.js，资源不存在就会加载失败导致空白。
• 解决方法：修改打包公共路径为绝对路径
  • create-react-app创建的项目，在package.json中新增配置：

  "homepage": "/"
  

  • 自研webpack配置的项目，修改webpack配置中output.publicPath值为'/'

2. 排查服务端路由回退配置 #

React使用客户端路由，所有路径请求都需要返回根目录的index.html才能让前端路由接管逻辑，你当前的服务端只适配了一级静态路由，多级动态路由的请求没有做回退处理：

• Nginx服务端：在站点配置的server块中添加规则

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

• 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>

• 云平台部署（Netlify/Vercel等）：在项目根目录新增_redirects文件，写入以下规则

/*    /index.html   200

3. 排查路由版本与参数获取逻辑 #

如果完成前两步配置后仍然空白，检查路由相关代码：

• 你当前的路由写法是react-router-dom v5的规范，如果你升级到了v6版本，原来的component属性配置不再生效，需要改成element写法，同时参数需要用useParams()钩子获取
• 检查ViewCategoryDetails、ViewCategoryImages组件的参数获取逻辑，v5版本参数通过props.match.params.id/props.match.params.title获取，确认没有空值调用属性导致的JS报错白屏

4. 本地验证方法 #

先执行npm run build打包项目，再用serve -s build命令（需提前全局安装serve工具）启动打包后的产物，本地访问动态路由如果正常，说明问题出在服务端配置，如果本地也空白，优先排查打包路径和路由版本匹配问题。

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