React Router v4中的嵌套路由

Question

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

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

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

警告:您不应在同一路线中使用<Route component>和<Route children>; 将被忽略

Answer 1

CESCO的答案首先是组件,AppShell 然后是其中一个组件 Switch.但是这些组件不会在里面呈现AppShell,它们也不会是孩子们的AppShell.

在v4中包装组件你不再把你的Routes放在另一个组件中Route,你可以Route直接把它放在一个组件中.
IE:对于包装而不是<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组件,因为它在这里没用.看的时候非常有用这里.

Answer 2

您需要使用开关组件进行嵌套才能正常工作.另外,请看这个问题

// main app
<div>
    // not setting a path prop, makes this always render
    <Route component={AppShell}/>
    <Switch>
        <Route exact path="/" component={Login}/>
        <Route path="/dashboard" component={AsyncDashboard(userAgent)}/>
        <Route component={NoMatch}/>
    </Switch>
</div>

版本4组件不带孩子,相反,你应该使用渲染道具.

<Router>
    <Route render={(props)=>{
      return <div>Whatever</div>}>
    </Route>
  </Router>

Answer 3

尝试：

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