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

Question

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

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

在类别页面上，"/:category 每个产品都有两个按钮，“Quick View”和“Full view”，点击我想要移动的按钮到产品页面，还可以设置视图状态，如setView('quick') 或setView('full')。

我尝试使用 onclick 按钮来解决这个问题，代码如下：

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

这里都调用了，history api 改变了 url，但是组件没有为那个 url 加载。我无法使用 react-router 的 <Link> 组件，因为我需要在进入产品页面之前设置视图。

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

Answer 1

试试这个
移除组件并使用渲染

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