React Router v4 BrowserRouter嵌套HashRouter组件未正常渲染问题求助

核心问题原因 #

React Router v4 禁止嵌套不同类型的 Router 实例，你外层用了 BrowserRouter，内层又嵌套了 HashRouter，两个路由实例的路径监听逻辑完全独立：

• 外层 BrowserRouter 监听 URL 全路径
• 内层 HashRouter 只会监听 URL 中 # 之后的 hash 段
  你在 loggedInComponent 里执行的重定向默认操作的是外层 BrowserRouter 的全路径，不会修改 hash 段，所以内层 HashRouter 完全感知不到路径变化，不会触发组件渲染。
  另外你贴的 Redirect 代码存在语法错误，也会导致跳转失效。

方案1：保留 HashRouter 修复路由不触发问题 #

只要保证 HashRouter 始终被挂载，且内部跳转都走 HashRouter 的路由逻辑即可：

1. 调整外层路由配置，移除 HashRouter 外层的路径匹配规则，保证 HashRouter 始终被渲染：

<BrowserRouter>
  <Switch>
    <Route exact path='/browserRouterPath' component={loginComponent}/>
    {/* 不指定path，只要未匹配上上面的路由，就渲染HashRouter */}
    <Route>
      <HashRouter>
        <Switch>
          <Route path='/hashRouterPath' component={loginComponent2}/> 
          <Route path='/' component={loggedInComponent}/>
        </Switch>
      </HashRouter>
    </Route>
  </Switch>
</BrowserRouter>

2. 修正 loggedInComponent 里的 Redirect 语法：

<Switch>
<Route exact path='/' render={() => (
  <Redirect to='/finalComponent'/> 
)}/>
{/* 其他子路由配置 */}
</Switch>

方案2：移除 HashRouter 并解决样式失效问题 #

移除 HashRouter 后样式失效，90% 以上是静态资源路径或者样式选择器依赖 HashRouter 注入的属性导致的，对应修复即可：

• 静态资源路径问题：CSS 中如果用了相对路径引用背景图、字体等资源，全部替换为绝对路径，或者在打包工具（webpack/vite）中配置正确的 publicPath 与生产环境部署路径一致
• 选择器依赖问题：检查是否有 CSS 选择器绑定了 HashRouter 自动生成的 DOM 属性、类名，把这类依赖改为绑定你自己在根组件上写的固定类名即可

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