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