React Router 更改参数不会触发 componentWillRecieveProps

Posted 2023-02-19

【中文标题】React Router 更改参数不会触发 componentWillRecieveProps

【英文标题】：React Router changing params doesn't fire componentWillRecieveProps

【发布时间】：2017-11-07 17:41:41

【问题描述】：

问题：更改<Route /> 组件的参数不会更新它正在呈现的组件。路由变化显示在 URL 栏中，但直接渲染 this.props.match.params.id 会显示旧的 :id 而不是 URL 栏中反映的新的。

更新：我通过将 <BrowserRouter /> 从 index.js 文件移出并移入 App.js 文件来解决此问题。它不再是 Provider 的直接子代，而是 App 组件的子代。不知道为什么这会让一切突然变得正常。

我在做什么：我有一个<Link to="/user/11" />，它从user/7（或任何当前ID）变为/user/11

它正在渲染的组件的componentWillReceiveProps(newProps) 没有被触发。（这个组件使用react-redux 连接，如果有帮助的话。我尝试在连接周围应用withRouter，但没有帮助）

如果我在 chrome 中手动刷新页面（使用 CTRL-R 或刷新按钮），页面会显示新数据，呈现“新”参数。

TLDR：从/user/7 切换到/user/11 不会触发componentWillRecieveProps 函数，因此组件会显示旧状态

问题：我在这里做错了什么导致componentWillReceiveProps 无法触发。

我正在使用 react-router v4 和最新的 create-react-app

这是我的 CWRP 函数：

componentWillReceiveProps(newProps) 
  console.log("getProps")

  this.props.getUser(newProps.match.params.id)

  if (newProps.match.params.id == newProps.currentUser.id) 
    this.setState( user: "currentUser" )
   else 
    this.setState( user: "selectedUser" )
  

这是我的组件的完整代码：https://gist.github.com/Connorelsea/c5c14e7c54994292bef2852475fc6b43

我在这里关注解决方案，但它似乎对我不起作用。 Component does not remount when route parameters change

【问题讨论】：

当更改路由时console.log("getProps") 正在控制台中打印？

不，不是。这就是为什么我很困惑

【参考方案1】：

您需要使用React Router Redux