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。

预期行为：

访问：＆＃34; / pages / 13＆＃34; - ＆GT; render（） - ＆gt; componentDidMount（） - ＆gt;渲染（）
点击链接组件＆＃34; / pages / 15＆＃34; - ＆GT; componentWillUnmount（） - ＆gt;渲染（） - ＆GT; componentDidMount（） - ＆gt;渲染（）

我使用以下版本：

react：16.3.2
react-dom：16.3.2
react-router-dom：4.2.2

我做错了什么？我仍然是React的新手，所以要好一点：）

Answer 1

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

您将在不同的地方拥有访问匹配对象：将组件路由为this.props.match; 路线渲染为（{match}）=＆gt; （）; 将孩子路由为（{match}）=＆gt; （）; withRouter as this.props.match; matchPath作为返回值;

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

所以，简短的回答。使用componentDidMount进行首次抓取，然后使用componentWillRecieveProps(newProps)进行所有其余抓取呼叫。

查看this了解详情。

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

Answer 2

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

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

2 个答案: