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}`)
    }

这里两者都被调用，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'} />}
/>