React组件未在history.push上重新加载

Question

我有一个应用程序，其路由定义如下：

<Route exact path="/:category/:product" component={ProductComponent} />

在类别页面上，"/:category每个产品都有两个按钮，分别是“ 快速查看”和“ 完整视图”。移至产品页面，还设置了setView('quick')或setView('full')之类的视图状态。

我尝试通过使用带有以下代码的onclick按钮来解决此问题：

   () => {
        setView('quick')
        history.push(`/${category.slug}/${product.slug}`)
    }

在此都被调用，历史api会更改url，但不会为该url加载组件。我无法使用react-router的<Link>组件，因为我需要在进入产品页面之前设置视图。

如何使用react-router的历史记录来像<Link>一样执行页面更改？

Answer 1

尝试一下
删除组件并使用渲染

<Route
  exact
  path="/:category/:product"
  render={({ match }) => <ProductComponent key={match.params.product || 'empty'} />}
/>