Reactjs 反应路由器v4路由差异

我正在为我的react应用程序创建路由，有人能解释一下这两种方法的区别吗。 从用户的角度来看，它们的工作原理是一样的，在性能、最佳实践方面有什么不同

第一个是多个路由，为同一路径呈现不同组件：

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

第二种是单路径渲染组件作为道具。子对象（？）：

相当于：

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

---

据此:

有时需要渲染路径是否与位置匹配 不在这些情况下，可以使用函数children prop。它起作用了 与render完全相同，只是无论是否存在 匹配与否。子渲染道具接收所有相同的路由 道具作为组件和渲染方法，路由失败时除外 若要匹配URL，则match为null。这允许您动态地 根据路由是否匹配调整UI

因此，通过给路由提供子属性而不是组件，即使当前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>

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

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