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

Question

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

JSX:

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

在 Page 组件中，我在 componentDidMount 上进行了抓取，它在第一次加载路由时按预期工作。

例如，我访问:/pages/13 然后它获取页面数据，但是当我访问:/pages/13 然后点击一个链接组件(从 React-Router 导入)将我重定向到:/pages/15 - 然后更新 pageId 属性，但它永远不会重新呈现.

Page 组件从不运行 componentWillUnmount 之前，或 componentDidMount 之后。

预期行为:

1. 访问:/pages/13 → render() → componentDidMount() → render()
2. 点击链接组件 /pages/15 → componentWillUnmount() → render() → componentDidMount() → render()

---

我正在使用以下版本:

• react :16.3.2
• react 域:16.3.2
• react-router-dom: 4.2.2

---

我做错了什么？我对 React 还是很陌生，所以请多关照 :)

Answer 1

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

You’ll have access match objects in various places: Route component as this.props.match; Route render as ({ match }) => (); Route children as ({ match }) => (); withRouter as this.props.match; matchPath as the return value;

匹配对象(包含路由参数)是通过组件的 props 给出的。

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

检查 this了解更多信息。

注意:我不知道 componentWillRecieveProps(newProps) 即将被弃用，无论如何，它建议您使用 getDerivedStateFromProps(nextProps, prevState) 这基本相同