React项目构建时BrowserRouter、Redirect与路由冲突问题求助

我来帮你一步步排查并解决这些问题，看起来核心是basename配置错误和Redirect相对路径导致的路由异常，结合你已经设置"homepage": "."的情况，我们逐个击破：

1. 修正basename配置，解决构建后空白问题 #

你之前用window.location.pathname作为basename是个误区——这个值是当前页面的实时路径（比如访问/test时，它就是/test），会导致路由的基准路径随页面跳转不断变化，进而引发路由匹配混乱。

React在设置homepage: "."后，会自动生成process.env.PUBLIC_URL变量，它能根据开发/生产环境自动适配正确的基准路径：

• 开发环境下值为"/"
• 生产环境下值为部署的相对路径

所以把BrowserRouter的basename改成：

<BrowserRouter basename={process.env.PUBLIC_URL}>
  {/* 你的路由内容 */}
</BrowserRouter>

这个配置能同时兼容开发和生产环境，彻底避免构建后页面空白的问题。

2. 修复Redirect与路由的冲突，解决构建后空白+默认路径问题 #

你当前的路由配置有两个关键问题：

• Redirect的to用了相对路径"test"，而非绝对路径"/test"
• 存在重复的根路径路由<Route path="/" exact component={test} />，和Redirect逻辑冲突

修改后的正确路由结构如下：

<Switch>
  {/* 根路径重定向到/test，必须用绝对路径 */}
  <Redirect exact from="/" to="/test" />
  {/* 匹配/test路径 */}
  <Route path="/test" component={test} />
  <Route path="/test2" component={test2} />
  <Route path="/test3" component={test3} />
</Switch>

为什么这样改？ #

• 绝对路径"/test"确保重定向是基于basename的根路径跳转，不会出现路径叠加
• 删掉重复的根路径Route，因为Redirect已经处理了根路径的跳转逻辑，Switch会匹配第一个符合条件的路由，无需重复配置

3. 解决刷新路径叠加的问题 #

这个问题的根源就是你之前用了相对路径的Redirect，比如to="test"会在当前路径后拼接test——如果当前在/test，刷新时（假设路由匹配逻辑出错触发了Redirect）就会变成/test/test，多次刷新就会持续嵌套。

改用绝对路径to="/test"后，无论当前路径是什么，重定向都会跳转到基于basename的/test路径，彻底解决叠加问题。

最后验证步骤 #

1. 确保package.json中"homepage": "."配置正确
2. 替换basename为process.env.PUBLIC_URL
3. 按照上面的结构修正路由和Redirect
4. 重新构建并部署，测试开发环境和生产环境的路由行为

这样应该就能解决所有你遇到的问题了！

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