反应组件没有在历史上重新加载

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'} />}
/>