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

Posted 2023-02-21

【中文标题】React 组件未在 history.push 上重新加载

【英文标题】：React component not reloading on history.push

【发布时间】：2020-04-27 17:32:49

【问题描述】：

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

<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> 所做的那样？

【参考方案1】：

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

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

【讨论】：

是对的兄弟，每次URL改变key需要改变才能知道react它的渲染时间