使用react-router-dom V6构建后资源路径错误问题求助

问题根源 #

执行react build后，静态资源默认采用相对路径引用。当访问/scenarioplanning这类嵌套路由时，浏览器会将当前路由路径作为基准去请求资源，导致资源路径错误（比如请求/scenarioplanning/static/js/xxx.chunk.js，而非根目录的/static/js/xxx.chunk.js）。

解决方法 #

方法1：配置package.json的homepage字段 #

在项目根目录的package.json中添加或修改homepage字段为根路径：

{
  "name": "your-project-name",
  "homepage": "/",
  // 其他项目配置...
}

修改后重新执行npm run build，此时构建出的静态资源会使用绝对路径引用，无论访问哪个路由，都会从根目录加载资源。

方法2：构建时指定PUBLIC_URL环境变量 #

如果不想修改package.json，可以在构建命令中直接指定PUBLIC_URL：

PUBLIC_URL=/ npm run build

这会强制构建后的资源采用根路径的绝对地址，避免相对路径导致的错误。

额外确认 #

你的代码中BrowserRouter的basename设置为'/'是正确的，无需调整：

<BrowserRouter basename='/'>
  // 路由配置...
</BrowserRouter>

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