Question

我正在为我的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>

Answer 1

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

等同于：

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

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

有时您需要渲染路径是否与位置匹配还是与路径匹配不。在这种情况下，您可以使用child道具功能。有用与render完全一样，除了它是否存在匹配与否。子代渲染道具接收所有相同的路线 props作为组件和渲染方法，除非路由失败匹配URL，则match为null。这使您可以动态根据路线是否匹配来调整用户界面。

因此，通过为子代提供道具而不是组件作为路径，即使当前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>

React Router v4路由差异

1 个答案: