在响应中的 url 更改上重新渲染相同的组件

Question

我有一个路由，它接受一个 id 并为每个 id 呈现相同的组件，例如： <Route path='/:code' component={Card}/>

现在在 Link 标签中，我将一个 id 传递给组件。现在 Card 组件根据传递的 id 获取其他详细信息。但问题是它只为一个 id 呈现，如果我单击返回并转到下一个 id，则不会更新。我搜索并发现可以使用 componentsWillReceiveProps 但在 React 的最新版本中它已被弃用。那么如何做到这一点呢？

Answer 1

将当前位置作为组件上的键可以解决问题。

<Route path='/:code' component={(props) => <Card {...props} key={window.location.pathname}/>}/>

Answer 2

我刚刚遇到了类似的问题。我认为您将更新/重新渲染和重新安装混为一谈。这张关于反应生命周期方法的图表在我处理它时帮助了我。

如果你的问题和我的一样，你有一个类似的组件

class Card extend Component {
  componentDidMount() {
    // call fetch function which probably updates your redux store  
  }

  render () {
    return // JSX or child component with {...this.props} used, 
           // some of which are taken from the store through mapStateToProps
  }
}

第一次访问挂载此组件的 url 时，一切正常，然后，当您访问另一个使用相同组件的路由时，没有任何变化。那是因为组件没有被重新安装，它只是因为一些 props 发生了变化而被更新，至少this.props.match.params正在发生变化。

但是componentDidMount()在组件更新时不会被调用（见上面的链接）。因此，您不会获取新数据并更新您的 redux 存储。您应该添加一个componentDidUpdate()功能。这样你就可以在 props 改变时再次调用你的获取函数，而不仅仅是在组件最初安装时。

componentDidUpdate(prevProps) {
  if (this.match.params.id !== prevProps.match.params.id) {
    // call the fetch function again
  }
}

查看 react文档以获取更多详细信息。

Answer 3

Switch在React Router v4中在标签后添加标签Router修复了问题像这样

<Router>
  <Switch>
  </Switch>
</Router>