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

Question

I have an app with routes defined as follows:

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

On category page, "/:category I have two buttons for each product, " Quick View " and " Full view ", on click of which I want to move to product page, but also set the state for view like setView('quick') or setView('full') .

I tried solving this by using onclick on buttons with the following code:

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

here both are called, history api changes the url but component does not load for that url. I cannot use the react-router's <Link> component because I need to set the view before going to product page.

How can I use the history from react-router to perform page change like <Link> does?

Answer 1

Try this
Remove component and use render

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