Question

我有一个单击处理程序，可导航到项目详细信息页面。 this.props.history.push('/item/${id}')

我的商品详细信息容器中有这个

componentDidUpdate(prevProps, prevState) {
  if (
    this.props.match.params.id &&
    prevProps.match.params.id !== this.props.match.params.id
  ) {
    this.props.fetchItems()
  }
}

render() {
    const { items } = this.props
    return <div>{items.map(o => <div>{o.name}</div>)}</div>
}

因此，如果我从item/1单击到item/2，它将起作用，但是当页面已经在item/1上时，我单击了item/1，容器没有刷新，如何强制这种情况发生？

Answer 1

您当前正在检查最后一个id参数是否与当前参数不同，然后调用fetchItems。相反，您可以检查是否除 match.params.id以外的其他道具。

componentDidUpdate(prevProps, prevState) {
  if (/* any other prop except match.params.id changed */) {
    this.props.fetchItems()
  }
}

Answer 2

您尝试过window.location.reload()吗？所以基本上。

componentDidUpdate(prevProps, prevState) {
  if (
    this.props.match.params.id &&
    prevProps.match.params.id !== this.props.match.params.id
  ) {
    this.props.fetchItems()
  } else {
     location.reload();
   }
}

使用路由路由器v4强制更新同一路由

2 个答案: