React Router v4 中的嵌套路由 [英] Nested Routes in React Router v4

问题描述

我正在尝试设置一些嵌套路由以添加通用布局.检查代码:

 <路由器><路由组件={布局}><div><Route path='/abc' component={ABC}/><Route path='/xyz' component={XYZ}/>

</路线></路由器>

虽然这工作得很好，但我仍然收到警告:

<块引用>

警告:您不应使用<路由组件>和<路由子项>在相同的路线;将被忽略

解决方案

CESCO 的回答首先渲染组件 AppShell then Switch 内的组件之一代码>.但是这些组件不会在 AppShell 内部呈现，它们不会是 AppShell 的子组件.

在 v4 中，为了包装组件，您不再将 Route 放在另一个 Route 中，而是将 Route 直接放在一个组件.
I.E :对于包装器而不是 你直接使用 .

完整代码:

 <路由器><布局><Route path='/abc' component={ABC}/><Route path='/xyz' component={XYZ}/></布局></路由器>

这种变化可能是为了让 React Router v4 变得纯粹的想法React，因此您只能像使用任何其他 React 元素一样使用 React 元素.

EDIT :我删除了 Switch 组件，因为它在这里没有用.查看何时有用此处.

I'm trying to set up some nested routes to add a common layout. Check the code out:

  <Router>
    <Route component={Layout}>
      <div>
        <Route path='/abc' component={ABC} />
        <Route path='/xyz' component={XYZ} />
      </div>
    </Route>
  </Router>

While this works perfectly fine, I still get the warning:

Warning: You should not use <Route component> and <Route children> in the same route; will be ignored

解决方案

CESCO's answer renders first the component AppShell then one of the components inside Switch. But these components are NOT going to render inside AppShell, they will NOT be children of AppShell.

In v4 to wrap components you don't put anymore your Routes inside another Route, you put your Routes directly inside a component.
I.E : for the wrapper instead of <Route component={Layout}> you directly use <Layout>.

Full code :

  <Router>
    <Layout>
      <Route path='/abc' component={ABC} />
      <Route path='/xyz' component={XYZ} />
    </Layout>
  </Router>

The change is probably explained by the idea to make React Router v4 to be pure React so you only use React elements like with any other React element.

EDIT : I removed the Switch component as it's not useful here. See when it's useful here.

这篇关于React Router v4 中的嵌套路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！