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

Question

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

  <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

Answer 1

CESCO的答案首先渲染组件AppShell 然后 Switch 内部的组件之一。但这些组件不会在 AppShell 内渲染，他们不会是 AppShell 的 child .

在 v4 中，为了包装组件，您不再放置 Route在另一个里面Route ，你把你的Route直接在组件内部。
即:用于包装器而不是 <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 .