React BrowserRouter+Express+Nginx部署后带URL参数路由失效白屏问题

问题根因 #

React打包生成的静态资源默认使用相对路径引用，当你访问多级路径的路由（如/dvb/Hbf/3/5）时，浏览器会以当前URL的父路径/dvb/Hbf/3/作为基准拼接静态资源地址，导致请求路径错误。你的Express配置会把所有非静态资源请求都返回index.html，因此错误路径的静态资源请求拿到的是HTML内容而非真实的CSS/JS文件，浏览器解析失败后就会出现白屏。

解决方案 #

1. 修改React打包公共路径

选择以下任意一种方式配置即可，配置后重新打包项目，生成的index.html中所有静态资源引用都会自动使用根路径前缀，不会再随当前访问路径拼接：

• 在项目根目录的package.json文件中新增配置项："homepage": "/"
• 或者在项目根目录的.env环境变量文件中新增配置：PUBLIC_URL=/

2. 可选：调整Router配置（仅当你的应用整体部署在/dvb子路径下时需要）

如果你的React应用仅在域名的/dvb路径下提供服务，可以给BrowserRouter添加basename属性，避免路由匹配错误：

<Router basename="/dvb" forceRefresh={true}>
  {/* 原有组件代码保持不变 */}
</Router>

对应的路由规则也可以简化为：

<Route exact path="/:stop?/:amount?/:offset?" children={() => <DvbWidget name={"MainStaion"}/>}/>

3. 获取路径参数

在DvbWidget组件中通过react-router-dom提供的useParams钩子即可拿到路径中的参数：

import { useParams } from 'react-router-dom'

function DvbWidget() {
  const { stop, amount, offset } = useParams()
  // 此处stop=Hbf、amount=3、offset=5，可直接使用
}

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