CODEWITHSUNDEEP
reactjsreact-router
traviss0
traviss0

Reputation: 171

React Router: Advantages/disadvantages of route structure

This has been on the back of my mind for while now. I was wondering if anyone had some insights.

Here are two examples:

<Route path="/" component={Container}>
    <Route path="user" component={Users}>
        <Route path="user/:id" component={Profile} />
    </Route>
</Route>

In the above example my Users component would be rendering the Profile component through props.children.

<Route path="/" component={Container}>
    <Route path="user" component={Users} />
    <Route path="user/:id" component={Profile} />
</Route>

This example would be essentially the same as the first except I would need to import the Users component in Profile.

Is there any advantages/disadvantages to each approach in terms of performance and/or architecture?

Any thoughts would be appreciated.

Upvotes: 2

Views: 1588

Answers (1)

azium
azium

Reputation: 20614

This is very unlikely to be a cause any performance concerns, the two options are just organized differently and will behave differently. There isn't a better choice--only a choice that makes the most sense for your app.

The most important thing to keep in mind is that children is just a prop. Changing props doesn't cause your component to unmount. However, new children will cause the previous children to unmount.

In your first example, if you navigate to user/1 and then later navigate to user/5, Profile component will have mounted once, then unmounted, then mounted again.. but Users will have only mounted once.

If you do the same thing in your second example, Users and Profile will mount---then both unmount and mount again. This is because in this scenario the children that are changing, are those of Container.

Without any other information about your app.. it seems that the first scenario is more desirable because fewer components mount / unmount.. perhaps you can retain some state that way, but then again it depends on what your app needs to do.

Upvotes: 1

Related Questions