React路由问题：history.push()更新URL但未渲染目标组件的解决方案咨询

我帮你排查并解决这个导航异常的问题，这是React Router使用中比较常见的场景，咱们一步步来：

核心问题定位 #

你的代码里有两个关键问题导致URL更新但组件不渲染：

• 缺少Switch组件来管理路由匹配逻辑
• 需要确保react-router和react-router-dom的版本完全一致

具体修复步骤 #

1. 导入并使用Switch组件 #

在react-router-dom v5版本中，Switch组件的作用是只渲染第一个匹配当前URL的路由，没有它的话，路由系统无法正确触发组件的卸载和重新渲染（尤其是自定义history实例的场景下）。修改你的App组件代码：

import React from 'react';
import Login from './components/Login.jsx';
import Register from './components/Register';
import Apuntes from './components/Apuntes';
import history from './history/history';
import { Router } from 'react-router';
// 导入Switch组件
import { Route, Switch } from 'react-router-dom';

export function App() {
  return (
    <Router history={history}>
      {/* 用Switch包裹所有路由规则 */}
      <Switch>
        <Route exact path='/login' component={Login} />
        <Route exact path='/register' component={Register} />
        <Route exact path='/apuntes' component={Apuntes} />
      </Switch>
    </Router>
  );
}

2. 验证Login组件的history调用方式 #

确保你在Login组件中通过React Router提供的正确方式获取history，推荐使用useHistory钩子（和Router使用的是同一个实例）：

// Login组件内的示例代码
import { useHistory } from 'react-router-dom';

function Login() {
  const history = useHistory();

  const handleLoginSuccess = () => {
    // 这里执行登录逻辑
    history.push('/apuntes');
  };

  return (
    {/* 你的登录表单内容 */}
  );
}

3. 检查并统一依赖版本 #

因为你同时使用了来自react-router的Router和react-router-dom的Route，两个包版本不一致会导致内部history实例不兼容。运行以下命令查看版本：

npm list react-router react-router-dom

如果版本不同，重新安装相同版本的包（比如统一安装v5.3.0）：

npm install react-router@5.3.0 react-router-dom@5.3.0

额外提示 #

如果之后你打算升级到react-router-dom v6，注意v6已经移除了Switch，改用Routes组件，路由写法也有变化：

<Routes>
  <Route path='/login' element={<Login />} />
  <Route path='/apuntes' element={<Apuntes />} />
</Routes>

不过针对你当前的代码，上面的v5修复方案完全可以解决问题。

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