CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
vitjbr
vitjbr

Reputation: 1166

React Router v4 Route difference

I am creating routing for my react app, could someone explain me difference between these two approaches. From user point of view they work the same, what is the difference in performance, best practice?

First one is multiple Routes rendering different component for the same path: 

<Route path='/:shop/booking' component={Services}/>
<Route path='/:shop/booking' component={Calendar}/>

Second is single path rendering components as props.children(?) :

<Route path='/:shop/booking'>            
    <Aux>
        <Services/>
        <Calendar/>
    </Aux>
</Route>

Upvotes: 0

Views: 62

Answers (1)

R.Duteil
R.Duteil

Reputation: 1227

<Route path='/'>            
    <Component>
</Route>

Is equivalent to :

<Route path='/' children={Component}/>

According to this : https://reacttraining.com/react-router/core/api/Route/children-func :

Sometimes you need to render whether the path matches the location or not. In these cases, you can use the function children prop. It works exactly like render except that it gets called whether there is a match or not.The children render prop receives all the same route props as the component and render methods, except when a route fails to match the URL, then match is null. This allows you to dynamically adjust your UI based on whether or not the route matches.

So by giving children prop instead of component to your route, you force it to render even if the current URL does not match. And I might be mistaking but it seems that adding a component prop to a route override its children prop.

Thus you cannot expect the same behavior for this two pieces of code :

<Route path='/:shop/booking' component={Services}/>
<Route path='/:shop/booking' component={Calendar}/>

Shows the two components for the specified path.

<Route path='/:shop/booking'>            
    <Aux>
        <Services/>
        <Calendar/>
    </Aux>
</Route>

Shows the two components wrapped in another, for any path.

Finally, I would say that the best practice in React is to wrap your two components into one, and add it to the component prop of a route instead of creating two routes with the exact same path.

If you cannot wrap your two components because one has to be displayed on several routes, you can use something like the following : 

  <BrowserRouter>
    <div> 
      <Header />
      <Switch>
       <Route path='/' component={Home}/>
       <Route path='/foo' component={Foo}/>
       <Route path='/foo2' component={Foo2}/>
      </Switch>
      <Footer />
    </div>
  </BrowserRouter>

Upvotes: 1

Related Questions