React Router切换路由时组件不渲染问题求助

你的问题核心是重复嵌套了路由容器组件，导致路由上下文冲突，这就是点击Link时URL变化但组件不渲染的关键原因。

具体问题点 #

在index.tsx中，你已经用<BrowserRouter>包裹了整个App：

render( 
  <Provider store={store}> 
    <BrowserRouter> 
      <App /> 
    </BrowserRouter> 
  </Provider>, 
  document.getElementById('app') 
);

但在app.tsx的App组件里，又再次嵌套了<Router history={history}>：

return (
  <Router history={history}>
    {/* ... 内部路由代码 ... */}
  </Router>
);

<BrowserRouter>本身就是<Router>的封装，自带了默认的history实例，你手动嵌套的<Router>会覆盖外层的路由上下文。点击Link时，外层的history更新了URL，但内层的Router没有同步感知到这个变化，自然不会渲染对应的Route组件。

修复步骤 #

方案1：移除App内部的<Router>（推荐，适合大多数场景）

1. 修改app.tsx的render方法，去掉外层的<Router>包裹：

render() {
  const { alert } = this.props;
  return (
    <div className="jumbotron">
      <div className="container">
        <div className="col-sm-8 col-sm-offset-2">
          {alert.message && <div className={`alert ${alert.type}`}>{alert.message}</div> }
          <Link to="/login">Login</Link>
          <Switch>
            <Route path="/login" component={Login} />
            {/* <PrivateRoute path="/" component={Home} /> */}
            {/* <Redirect from="*" to="/" /> */}
          </Switch>
        </div>
      </div>
    </div>
  );
}

2. 调整history监听逻辑：因为App已经通过withRouter获取了路由props，所以可以在componentDidMount里监听props.history，而不是自定义的history实例：

componentDidMount() {
  this.unlisten = this.props.history.listen(() => {
    this.props.clearAlerts();
  });
}

componentWillUnmount() {
  this.unlisten(); // 记得清理监听，避免内存泄漏
}

方案2：改用自定义history统一管理（适合需要在redux等外部使用history的场景）

如果你确实需要使用自定义的history实例（比如在redux action里跳转路由），那应该把自定义history放到最外层的路由容器里，而不是嵌套：

1. 修改index.tsx，把<BrowserRouter>换成<Router>并传入自定义history：

import { Router } from 'react-router-dom';
import { history } from './utils/helpers'; // 导入你的自定义history

render( 
  <Provider store={store}> 
    <Router history={history}> 
      <App /> 
    </Router> 
  </Provider>, 
  document.getElementById('app') 
);

2. 同样移除app.tsx里的<Router>包裹，保持和方案1一样的render内容。

额外检查点 #

• 确保你的自定义history是用createBrowserHistory()创建的（如果使用history库的话），避免和BrowserRouter的history类型冲突。
• 确认withRouter的使用顺序：withRouter(connect(...)(App))是正确的，这样connect后的组件能正常获取到路由props。

验证修复 #

完成修改后重新启动应用：

1. 初始加载时URL对应的组件正常渲染；
2. 点击Login Link，URL会切换到/login，同时Login组件会正常渲染；
3. 控制台也不会再出现无反应的情况。

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