React路由器v4中的嵌套路由

我试图设置一些嵌套的路线来添加一个共同的布局。 检查代码：

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

虽然这工作得很好，我仍然得到警告：

警告：你不应该在同一条path上使用<Route component>和<Route children> 将被忽略

Answer 1

CESCO的答案首先呈现组件AppShell 然后是Switch内部组件之一。 但是这些组件不会在AppShell呈现，它们不会是AppShell子AppShell 。

在v4中打包组件，你不再把你的Route s放在另一个Route里面，你把Route s直接放在组件里面。
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> 

Answer 4

如果您不希望Layout在加载时运行。 使用这个方法：

 <div className="container"> <Route path="/main" component={ChatList}/> <Switch> <Route exact path="/" component={Start} /> <Route path="/main/single" component={SingleChat} /> <Route path="/main/group" component={GroupChat} /> <Route path="/login" component={Login} /> </Switch> </div> 

每当历史logging发生变化时，ChatList中的componentWillReceiveProps将运行。