React Router avoid unmounting

Question

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.

Can you try <Route path="/Products/:type?" exact render={Products} /> and see if it mounts/unmounts each time ? — ChrisR
– ChrisR, Commented Jun 5, 2018 at 10:35

Shubham Khatri · Accepted Answer · 2018-06-05 10:47:52Z

3

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

answered Jun 5, 2018 at 10:47

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

curly_brackets · Accepted Answer · 2020-10-31 12:21:55Z

0

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.

answered Oct 31, 2020 at 12:21

curly_brackets

5,60515 gold badges62 silver badges103 bronze badges

Comments

simbathesailor · Accepted Answer · 2018-06-05 10:29:24Z

-1

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.

answered Jun 5, 2018 at 10:29

simbathesailor

3,6852 gold badges22 silver badges30 bronze badges

1 Comment

Ricardo Over a year ago

That’s not correct. You don’t have to nest. @Shubham is right on replacing component prop by render.

Collectives™ on Stack Overflow

React Router avoid unmounting

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related