Skip to content

Why pass {…props} in a React Route?

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?



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.

User contributions licensed under: CC BY-SA
6 People found this is helpful