react-router 只变 link 不更新内容的问题的解决记录_react使用link 路由切换路由变了内容没切换-优快云博客

本文链接：https://blog.youkuaiyun.com/Beijiyang999/article/details/78992548

在React+Redux+node.js项目中，遇到React Router组件在Link改变时不更新内容的问题。通常，这个问题发生在组件通过connect()连接到Redux且未作为路由组件渲染时。解决方案是使用withRouter包裹connect()。然而，在特定场景下，即使使用withRouter，当从CourseContainer切换到EpisodeContainer时，EpisodeContainer的生命周期方法不执行，导致内容不更新。通过监听props变化并在Link变化后执行逻辑，避免死循环，通过解构赋值根据链接请求新内容，成功解决此问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React + Redux + node.js 的项目

之前遇到类似的问题，是这种情况：

用 withRouter() 解决

Blocked Updates

Generally, React Router and Redux work just fine together. Occasionally though, an app can have a component that doesn’t update when the location changes (child routes or active nav links don’t update).
This happens if:
1. The component is connected to redux via connect()(Comp).
2. The component is not a “route component”, meaning it is not rendered like so:
The problem is that Redux implements shouldComponentUpdate and there’s no indication that anything has changed if it isn’t receiving props from the router. This is straightforward to fix. Find where you connect your component and wrap it in withRouter.
// before
export default connect(mapStateToProps)(Something)

// after
import { withRouter } from ‘react-router-dom’
export default withRouter(connect(mapStateToProps)(Something))

这次不一样。

结构

Route
- 检测权限的高阶组件
  - EpisodeContainer
    - Episode
      - SideCatalogue (侧边视频目录)

点击视频目录，EpisodeContainer 组件 render 函数执行，但 componentDidMount() 以及 will.. 都不执行。根据链接请求视频的逻辑写在其中，自然不会执行，页面停止在之前的内容。刷新页面，内容会更新。

相同的代码，在下面情况中是正常的

Route
- 检测权限的高阶组件
  - CourseContainer
    - Course
      - Catalogue (本节相关视频目录)

react-router 大概原理，是 link 修改链接；router 定义链接与组件的匹配关系。
该情况下，从渲染 CourseContainer 变成渲染 EpisodeContainer ，后者的装载过程的生命周期函数会执行。

而之前的情况是，本来就在 EpisodeContainer 里，点击链接，route 制定匹配的渲染的还是 EpisodeContainer，所以装载过程的生命周期函数不执行。

对策：

只要父组件的render被调用，render….. 深入浅出 p30

此处，组件的props发送了改变，自然会调用该生命周期函数。
加上条件判断，只有link变化后才执行逻辑，防止出现 props变化 => 执行=>props变化 => 执行的死循环。

  componentWillReceiveProps() {
    if (this.props.history.location !== this.props.location) {
      let params = this.props.history.location.pathname.split('/')
      const [ , courseName, episodeName] = params
      this.props.fetchEpisode({courseName, episodeName})
    }
  }

通过数组解构赋值，点击那个 link ，就向后台请求相关的内容，从而实现新内容的渲染。