React Router中this.history.push仅修改URL不渲染组件

看起来你遇到的是React Router跳转后URL变化但组件未自动更新的典型问题，主要是路由配置的两处不合理导致的，咱们一步步来修复：

1. 未用Switch组件管理路由匹配逻辑 #

你当前用<div>包裹所有路由，这会让React Router渲染所有匹配当前URL的路由。虽然根路径加了exact，但这种写法会导致路由状态更新时的匹配逻辑混乱，无法自动切换到目标组件。Switch是React Router的核心组件，它会从上到下遍历路由规则，只渲染第一个匹配的路由，这是确保路由正常切换的基础。

2. 重复路由+多余的history传递 #

你在根路径下声明了两个完全相同的exact path='/'路由，这会导致访问根路径时同时渲染App和UserForm，本身就不符合预期。另外，给第二个Route手动传递history={history}是多余的——Route会自动从上层Router继承history实例，手动传递反而可能导致实例不统一，引发路由状态不同步。

修正后的路由配置 #

import { Switch, Router, Route } from 'react-router-dom';

// 确保你的history实例是全局唯一的（比如通过createBrowserHistory创建）
// import { createBrowserHistory } from 'history';
// const history = createBrowserHistory();

<Router history={history}>
  <Switch> {/* 用Switch替换原来的div */}
    {/* 合并根路径路由，若需同时渲染App和UserForm，建议用嵌套或render函数包裹 */}
    <Route exact path='/' component={App} />
    {/* 若要同时渲染两个组件，可改用render写法：
    <Route exact path='/' render={() => (
      <div>
        <App />
        <UserForm />
      </div>
    )} />
    */}
    <Route exact path='/test' component={Test} />
  </Switch>
</Router>

额外排查点 #

如果Test组件是嵌套在非路由渲染的组件中，需要用withRouter高阶组件包裹它，确保它能接收路由更新的props：

import { withRouter } from 'react-router-dom';

class Test extends React.Component {
  // 你的组件逻辑
}

export default withRouter(Test);

这样修改后，调用this.props.history.push('/test')时，React Router会正确匹配并渲染Test组件，无需手动刷新浏览器。

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