Javascript 位置参数更改时，React路由器未卸载

这个问题快把我逼疯了，我得到了一个由

create-react-app

创建的简单小应用，我正在使用

react-Router

JSX:

在页面组件中，我在

componentDidMount

上有一个fetch，它在第一次加载路由时按预期工作

例如，我访问：

/pages/13

，然后它获取页面数据，但当我打开时：

/pages/13

，然后单击链接组件（从

React Router

导入）将我重定向到：

/pages/15

-然后更新

页面ID

属性，但它不会重新呈现

页面

组件在之前从未运行过

componentWillUnmount

，或者在之后从未运行过

componentDidMount

预期行为：

访问：

/pages/13

→ <代码>渲染（）→ <代码>组件安装（）→ <代码>渲染（）

单击链接组件

/pages/15

→ <代码>组件将卸载（）→ <代码>渲染（） → <代码>组件安装（）→ <代码>渲染（）

---

我正在使用以下版本：

• 反应：16.3.2
• 反应dom:16.3.2
• 反应路由器dom:4.2.2

---

---

我做错了什么？我还没有反应过来，所以请注意：）

您的问题是，

componentDidMount

只在组件完全装入时执行，并且只发生一次。在这种情况下，更改route参数不会更改组件，我的意思是，当您更改

pageId

时，您仍然在同一个组件中，因此

componentDidMount

将不再执行。 那么你能做什么呢？好吧，我建议你研究一下

componentWillReceiveProps（newProps）

方法，只要组件的道具即将被修改，就会执行这个方法，在这种情况下，这就是你要寻找的，因为根据：

您可以在不同的位置访问匹配对象： 将组件路由为this.props.match； 路由渲染为（{match}）=>（）； 将子项路由为（{match}）=>（）； 使用路由器作为this.props.match； matchPath作为返回值

匹配对象（包含路由参数）通过组件的道具提供

所以，简短的回答。第一次提取使用

componentDidMount

，其余所有提取调用使用

componentwillreceiveprops（newProps）

查看更多信息

---

注意：我不知道

componentwillreceiveprops（newProps）

即将被弃用，无论如何，它建议您使用

getDerivedStateFromProps（nextrops，prevState）

这基本上是相同的当参数改变时，您的

路由不会重新安装组件。这是意料之中的行为。您应该通过
组件WillReceiveProps
捕获参数更改，否则如果您希望强制重新安装，您应该使用
可能的重复感谢！是的，这就是为什么我避免使用ComponentWillReceiveProps（），而是研究getDerivedStateFromProps（），而最终使用componentDidUpdate（）和getDerivedStateFromProps（）的组合。它现在起作用了！美好的我很高兴，至少我可以为您指出解决方案：）
<Router>
    <Route path="/pages/:pageId" component={Page} />
</Router>