react-router – React Router v4中的嵌套路由

我正在尝试设置一些嵌套路由来添加公共布局.检查代码：

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

虽然这很好用,但我仍然收到警告：

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

CESCO的回答首先是组件AppShell,然后是Switch内部的一个组件.但是这些组件不会在AppShell中呈现,它们不会是AppShell的子代.

在v4中包装组件,你不再将你的路由放在另一个路由中,你将路由直接放在一个组件中.
I.E：用于包装而不是< Route component = {Layout}>你直接使用< Layout>.

完整代码：

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

这种变化可能是因为让React Router v4变得纯粹的想法
React所以你只使用React元素和任何其他React元素一样.

编辑：我删除了Switch组件,因为它在这里没用.看看它什么时候有用here.