Why pass {...props} in a React Route?

Question

I'm using the route below just because it was the code I found on the web:

<Route exact path="/test" render={(props) => <Test {...props} msg={ "abc" } /> } />

I know the {...props} denotes multiple arguments but I can't understand why I need it at all because the code below also works just fine and props.msg is available in Test expected

<Route exact path="/test" render={() => <Test msg={ "abc" } /> } />

So what does {...props} actually do when passed in during render?

Answer 1

From the documentation :

The render prop function has access to all the same route props (match, location and history) as the component render prop.

If Test is not using any of these then you don't have to pass them.

Answer 2

For your use case, your second code snippet is sufficient and will work just fine.

Spreading the props into the child component like

<Route exact path="/test" render={(props) => <Test {...props} msg={ "abc" } /> } />

makes sense if you want to pass properties to the child component that you are not handling yourself but receiving from another source like the Route-Component itself (in particular the route props "match", "location" and "history").

Answer 3

Keep in mind you can have parameters in your route, ex: /users/:username Those props will allow you to access it. In your case, you probably don't need it but you're better to always include them so it's consistent.

https://reacttraining.com/react-router/web/api/Route/route-props

more doc about the 3 props that are provided :

• match https://reacttraining.com/react-router/web/api/match
• location https://reacttraining.com/react-router/web/api/location
• history https://reacttraining.com/react-router/web/api/history