React Router v4 路由区别答案

【问题标题】：React Router v4 Route differenceReact Router v4 路由区别
【发布时间】：2018-09-20 12:49:29
【问题描述】：

我正在为我的 react 应用程序创建路由，有人可以解释一下这两种方法之间的区别。从用户的角度来看，它们的工作方式相同，性能、最佳实践有何不同？

第一个是多个Routes为同一路径渲染不同的组件：

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

二是单路径渲染组件为props.children(?)：

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

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

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

相当于：

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

据此：https://reacttraining.com/react-router/core/api/Route/children-func：

有时您需要渲染路径是否与位置匹配或不是。在这些情况下，您可以使用功能 children 道具。有用与 render 完全一样，只是它被调用是否存在匹配与否。子渲染道具接收所有相同的路线 props 作为组件和渲染方法，除非路由失败匹配 URL，则 match 为空。这使您可以动态地根据路由是否匹配来调整你的 UI。

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

【讨论】：