使用react-router-dom与react-redux渲染Router.Consumer时报跨组件更新错误

这个警告的核心来源是在Router.Consumer的渲染周期内，同步执行Redux dispatch操作更新全局状态，触发了其他订阅Redux的组件提前重渲染。
React 18之后强化了渲染流程的一致性要求：组件渲染阶段（包括Route组件的render prop执行过程），不能触发其他组件的状态更新/重渲染，否则会打断当前渲染流、引发不可预期的渲染循环，因此抛出该警告。

你在App组件的路由配置中写的这段逻辑是触发警告的直接原因：

<Route exact path="/about" render={() => {
  this.props.onIndirectLink("About"); // 渲染阶段同步dispatch
  return <AboutPage />
}}/>

当页面直接刷新/about、/credits、/contact这类路由时，路由匹配逻辑会立刻执行对应的render prop，同步触发dispatch更新Redux中的activeNavBar。此时这个执行流程还属于Router.Consumer的渲染过程，而你连接了Redux的DesktopHeader组件订阅了activeNavBar的变化，会立刻进入重渲染流程，就会报错。

1. 移出渲染阶段的dispatch调用 #

不要在Route的render属性里执行状态更新，把导航状态的同步逻辑移到对应页面的挂载副作用中：

• 给AboutPage、CreditsPage、ContactPage分别注入对应更新activeNavBar的dispatch方法，在页面自身的componentDidMount（类组件）或useEffect（函数组件）中触发更新。
• 简化Route配置，去掉冗余的render prop：

<Switch>
  <Route exact path="/" component={HomePage} />
  <Route exact path="/about" component={AboutPage} />
  <Route exact path="/credits" component={CreditsPage} />
  <Route exact path="/contact" component={ContactPage} />
</Switch>

2. 清理冗余的本地状态 #

App组件中维护的activeLink本地状态没有实际作用：activeNavBar已经存在Redux全局状态中，DesktopHeader也已经直接从Redux读取这个值实现导航高亮。可以删掉App里的activeLink状态、componentDidMount里的setState逻辑，以及传给HeaderPage的Active prop，减少不必要的状态同步损耗。

3. 修正代码中的其他隐患 #

• 删掉DesktopHeader点击事件中空操作的this.setState({})，这类无意义的调用会触发组件不必要的重渲染。
• 修复HeaderPage的resize事件绑定问题：this.resize.bind(this)会在每次render时生成全新的函数引用，导致removeEventListener无法正确移除监听，引发内存泄漏。可以把resize方法定义为类属性箭头函数，或者在constructor中提前绑定this指向。

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