React-Router 不会在位置参数更改时卸载答案

【问题标题】：React-Router not unmounting on location parameter changeReact-Router 不会在位置参数更改时卸载
【发布时间】：2018-10-08 07:48:22
【问题描述】：

这个问题快把我逼疯了，我有一个由create-react-app 创建的简单小应用程序，我正在使用React-Router。

JSX：

<Router>
    <Route path="/pages/:pageId" component={Page} />
</Router>

在页面组件中，我对componentDidMount 进行了获取，它在第一次加载路由时按预期工作。

例如，我访问：/pages/13，然后它会获取该页面数据，但是当我打开时：/pages/13，然后单击链接组件（从 React-Router 导入）将我重定向到：/pages/15 - pageId 属性随后会更新，但不会重新渲染。

Page 组件永远不会在 componentWillUnmount 之前或之后运行 componentDidMount。

预期行为：

访问：/pages/13→render()→componentDidMount()→render()
点击链接组件/pages/15→componentWillUnmount()→render() → componentDidMount() → render()

我正在使用以下版本：

反应：16.3.2
反应域：16.3.2
react-router-dom: 4.2.2

我做错了什么？我对 React 还是很陌生，所以要友善 :)

【问题讨论】：

React doesn't reload component data on route param change 可能重复

标签： javascript reactjs react-router

【解决方案1】：

您的问题是 componentDidMount 仅在组件完全挂载时才执行，并且仅发生一次。在这种情况下，更改路由参数不会更改组件，我的意思是，当您更改pageId 时，您仍然在同一个组件中，因此componentDidMount 永远不会再次执行。那你能做什么呢？好吧，我建议你看看componentWillReceiveProps(newProps)方法，只要组件的道具即将被修改，就会执行这个方法，在这种情况下，这就是你要找的，因为，根据@ 987654321@:

您可以在不同的地方访问匹配对象：路由组件为 this.props.match；路由渲染为 ({ match }) => (); 将孩子路由为 ({ match }) => (); withRouter as this.props.match; matchPath 作为返回值；

匹配对象（包含路由参数）是通过组件的道具给出的。

所以，简短的回答。使用componentDidMount 进行第一次获取，然后使用componentWillRecieveProps(newProps) 进行所有其余的获取调用。

查看this了解更多信息。

注意：我不知道componentWillRecieveProps(newProps)即将被弃用，反正建议你使用getDerivedStateFromProps(nextProps, prevState)，基本一样

【讨论】：

谢谢！是的，这就是我避免使用 componentWillRecieveProps() 的原因，而是会研究 getDerivedStateFromProps()
我最终使用了 componentDidUpdate() 和 getDerivedStateFromProps() 的组合。它现在工作了！
很好！我很高兴至少我可以为您指出您的解决方案:)

【解决方案2】：

当参数改变时，您的Route 不会重新安装您的组件。这是预期的行为。你应该通过componentWillReceiveProps捕捉参数变化，否则如果你想强制重新安装，你应该使用<Route path="/your/path/with/:id" render={props => <Component {...props} key={props.params.id} />

【讨论】：