React component not reloading on history.push

108
January 10, 2020, at 3:10 PM

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'} />}
/>
READ ALSO
face recognition application [closed]

face recognition application [closed]

Want to improve this question? Update the question so it focuses on one problem only by editing this post

101
Why behavior is different?

Why behavior is different?

What's the difference between createRef and ref={(c) => thisel = c}?

95
Are there any creative workarounds to get the browser to play audio on an inactive mobile device?

Are there any creative workarounds to get the browser to play audio on an inactive mobile device?

I built a gamified Pomodoro/Todo web app on React, and realized near the finishing stages of production that the audio won't fire if the phone isn't active (I know, rookie mistake)I searched here and confirmed what I feared to be true

82