React Router v4 Разница в маршрутах

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

Эквивалентно :

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

Согласно этому: 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.

Таким образом, давая дочернюю опору вместо компонента для вашего маршрута, вы заставляете его отображать, даже если текущий URL-адрес не совпадает. И я могу ошибаться, но кажется, что добавление свойства компонента к маршруту отменяет его свойство дочернего элемента.

Таким образом, вы не можете ожидать одинакового поведения для этих двух частей кода:

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

Показывает два компонента для указанного пути.

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

Показывает два компонента, заключенных в другой, для любого пути.

Наконец, я бы сказал, что лучшая практика в React - обернуть ваши два компонента в один и добавить его в опору компонента маршрута вместо создания двух маршрутов с одним и тем же путем.

Если вы не можете обернуть свои два компонента, потому что один должен отображаться на нескольких маршрутах, вы можете использовать что-то вроде следующего:

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