(React Router) What is the difference between Route children and component props

JavaScript
#1

I’ve got some troubles understanding what’s the diferrence between this:

<Route path="user/:id" component={UserComponent} />

and this:

<Route path="user/:id" children={<UserComponent/>} />

inside Switch component when using React Router.

In both cases those components will render if the url will look like this “/user/4322”. I’m reading React Router documentation but I can’t understand this use case correctly (https://reactrouter.com/core/api/Route/route-props)

#2
  • the first one is if you want to mount a new component when the route matches. This is what things most often look like: you have a set of routes and they all open a new “screen”, last component unmounts, new component mounts, everything gets blown away. It’s the simplest way to do things.
  • second one is if you want something to render all the time and not remount. So for example, as in the example in the docs, you have a set of navigation links, and you want to animate between them on route change. If you used component this wouldn’t work, because the new component would mount every time and the animations wouldn’t happen. But because children is used, can still have the URL change in the browser but not have everything be blown away every time the URL changes.

children (and render) are going to be more fiddly to use most of the time, because they cater to less common scenarios (in children's case, preventing new component creation every time routes change, allowing the UI to dynamically change based on route).

2 Likes
#3

Dear Dan,

Thanks for this deep-dive reply. Thanks to you I’ve finally understand this difference!

#4