React Router v4 路由区别

Question

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

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

<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：

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.

因此，通过为您的路线提供 children 道具而不是组件，即使当前 URL 不匹配，您也可以强制渲染它。我可能误会了，但似乎向路由添加组件道具会覆盖其子道具。

因此，您不能期望这两段代码有相同的行为：

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

显示指定路径的两个组件。

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

对于任何路径显示两个组件包裹在另一个组件中。

最后，我想说的是，React 中的最佳实践是将两个组件合二为一，并将其添加到路由的 component prop 中，而不是创建具有完全相同路径的两个路由。

如果你不能包装你的两个组件，因为一个必须显示在多个路由上，你可以使用类似下面的东西：

  <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 路由区别

React Router v4 Route difference

reactjs

react-router

react-router-dom