CODEWITHSUNDEEP
reactjsreact-router
Milo Bem
Milo Bem

Reputation: 1033

React Router component parameter vs child component

What is the difference between

<Switch>
    <Route exact path="/">
        <Welcome />
    </Route>
</Switch>

and 

<Switch>
    <Route exact path="/" component={Welcome} />
</Switch>

Is it only a matter of style or they do different things?

Upvotes: 0

Views: 167

Answers (2)

Milo Bem
Milo Bem

Reputation: 1033

according to the documentation:

When you use component (instead of render or children, below) the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component prop, you would create a new component every render. This results in the existing component unmounting and the new component mounting instead of just updating the existing component. When using an inline function for inline rendering, use the render or the children prop (below).

If we don't use inline functions in render this difference doesn't matter.

Upvotes: 0

Leo Baron
Leo Baron

Reputation: 79

The difference is that when you use the child approach you can pass props to the component being rendered instead when you use the component approach you just pass in the component but can´t pass any props to it (apart from the ones that are automatically passed when you render a component through a Route)

Upvotes: 1

Related Questions