Issue when navigating on same component

Ionic Framework Ionic React
1

Hello,
i’m facing an issue (possible bug?) when navigating between routes that renders the same component.
I have a list of categories (parent-> children) that i want to navigate

          <Route path="/:tab(categories)" component={Tab1} exact={true} />
          <Route path="/:tab(categories)/:categoryId" component={Tab1} exact={true} />

the effect is that when navigating to /:tab(categories)/:categoryId it pushes the new view but reuses the older component so i can clearly see the same data on the screen.

Is there a way to instatiate a new component (same one, new instance) instead of reuse the older one?

2

Reverses the order of the routes, should be more specific to less specific

3

I “fixed” by adding this route

   <Route path="/:tab(categories)/*/:categoryId" component={Tab1} />

the trick is /*/
and keep the whole sub category path to routerLink each time navigation occurs from one to another with:

<IonCard routerLink={`${match.url}/${item.id}`} >

so it will be something like that at the end:

  1. /categories
  2. /categories/1
  3. /categories/1/2
  4. /categories/1/2/4
    and so on, instead of /categories/4 for case 4 in example.
    With this routing React recognizes different path and instances new component each navigation.

Thanks, bye!

4

I guess after looking at this again, why are you even navigating again? Just put up a loading screen and change the state of the component to re-render with the new data; that seems like a better architectural approach to me.

5

hi Aaron, i needed navigation to occur to keep history in the stack!
Thanks!