React项目build后页面空白或显示404 ErrPage，BrowserRouter路由问题求助

问题原因及解决方法 #

核心原因1：BrowserRouter 路由模式与部署配置不兼容

你当前使用的BrowserRouter是基于HTML5 History API实现的路由，存在两个适配问题：

• 部署的服务端没有配置路由重定向规则：用户直接访问/admin/xxx这类子路由时，服务器会尝试查找对应路径下的静态资源文件，找不到资源就会触发你代码中path="*"匹配的ErrPage组件，或者返回服务端原生404错误。
• 路径前缀不匹配：你在package.json中配置了"homepage": "./"使用相对路径部署，但是BrowserRouter默认的路由根路径是/，和你实际的部署路径不匹配，导致所有路由规则都无法命中，直接走通配符的404路由。

解决方案

方案一：无需修改服务端配置（快速生效）

直接把代码中的BrowserRouter替换为HashRouter，Hash模式通过URL的hash段（#后面的内容）实现路由，不需要服务端做额外配置，天然适配相对路径部署的场景，修改后重新执行build即可解决问题。

方案二：保留BrowserRouter的修改步骤

如果必须使用History模式路由，需要做两处修改：

• 给BrowserRouter添加basename属性，属性值和你项目实际部署的子路径保持一致，比如项目部署在域名根路径下就填/，部署在/admin/子路径下就填/admin，示例：

<BrowserRouter basename="/你的部署子路径" history={history}>

• 给部署的服务端添加重定向规则，确保所有路径的请求都指向index.html，交给React路由处理：
  • Nginx配置：在server块中添加try_files $uri $uri/ /index.html;
  • Apache配置：在.htaccess文件中添加重写规则，把所有请求重写到index.html

额外排查点

如果修改后问题仍然存在，检查你的Auth高阶组件的权限判断逻辑，是否存在权限校验不通过直接跳转404的逻辑，排除权限拦截导致的跳转问题。

内容的提问来源于stack exchange，提问作者봉승우