React Router Dom v6.26.1路由地址变更但组件不渲染问题求助

核心问题 #

你遇到的URL更新但页面不渲染的问题，根源在于React Router的BrowserRouter与connected-react-router的history实例不共享：

• BrowserRouter会内部创建独立的history对象，用于监听路由变化并渲染对应组件
• 你的Redux store中使用了自定义创建的createBrowserHistory()实例，通过routerMiddleware和connectRouter绑定到Redux状态
• 当通过Redux-saga的push action修改路由时，仅更新了Redux状态和地址栏URL，但React Router的组件监听的是自身内部的history，因此无法感知到变化，也就不会触发组件渲染

修复步骤 #

1. 替换BrowserRouter为ConnectedRouter #

从connected-react-router导入ConnectedRouter，并传入Redux配置中创建的同一个history实例，让React Router与Redux共享路由状态：

修改路由配置代码：

// 导入ConnectedRouter和你的history实例
import { ConnectedRouter } from 'connected-react-router';
import { history } from './path-to-your-redux-config-file'; // 替换为你的Redux配置文件路径

<ConnectedRouter history={history}>
  <Suspense fallback={<Loader />}>
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route path="/login-otp" element={<LoginOtp />} />
      <Route path="*" element={<Error />} />
    </Routes>
  </Suspense>
</ConnectedRouter>

2. 确保history实例全局一致 #

在你的Redux配置文件中导出创建的history对象，方便在路由组件中导入使用：

// 在Redux配置文件中添加导出
export const history = createBrowserHistory();

原理说明 #

ConnectedRouter是connected-react-router提供的专用路由组件，它会直接使用你传入的history实例，同时将路由状态与Redux store绑定。当Redux中触发push等路由action时，history实例会同步更新，ConnectedRouter会监听这个变化并自动渲染对应的路由组件，解决了之前的状态不一致问题。

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