React Router avoid unmounting

1
votes

I have 3 routes that use the same component and based on the route display slightly different content. The problem is that on every route change the whole components mounts/unmounts from scratch leading to performance issues. What is the best way to avoid the unmounting but still use the same component and have these 3 routes?

<Route path="/Products" exact render={Products} />
<Route path="/Products/shoes" exact component={Products} />
<Route path="/Products/books" exact component={Products} />

React Router version 4.

3
reactjsreact-router
which version of react-router you are using - simbathesailor
@stack26 version 4 - Avraam Mavridis
Can you try <Route path="/Products/:type?" exact render={Products} /> and see if it mounts/unmounts each time ? - ChrisR

3 Answers

3
votes

You can render Route based on route conditional path matching, in which case it wont remount everytime your route changes

<Route path="/Products(/shoes|/books)?" exact render={Products} />
0
votes

Shubham's solution is now a little different, here two years later

<Route path={["/Products/shoes", "/Products/books", "/Products"]} exact render={Products} />

Notice the order.

-1
votes

The routes in parallel will unmount whenever a new route is matched. you need to wrap the component for "/Products/shoes" and "/Products/books" inside Product component. In react-router v4, You need to nest the routes similar to your component. so you need to have product component containing the "/Products" route and other 2 inside the child component.

Frankly speaking I just gave an overview, read through react-router 4 documentation for better understanding.