React Router v4 中的嵌套路由答案

【问题标题】：Nested Routes in React Router v4React Router v4 中的嵌套路由
【发布时间】：2017-06-25 00:52:48
【问题描述】：

我正在尝试设置一些嵌套路由以添加通用布局。查看代码：

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

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

警告：你不应该同时使用和路线;会被忽略

【问题讨论】：

Nested routes with react router v4的可能重复

标签： react-router react-router-v4

【解决方案1】：

您需要使用 switch 组件进行嵌套才能正常工作。另外，请参阅question

// 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 的组件不带子组件，相反，您应该使用 render 属性。

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

【讨论】：

【解决方案2】：

试试：

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

【讨论】：

添加答案时，请添加一些解释，以便对其他人有用。但是 +1 先回答它
不是一个有用的评论。举个例子并不总是有帮助。
这似乎也适用于 BrowserRouter 而不是 Router。

【解决方案3】：

CESCO 的回答首先呈现组件AppShell 然后呈现Switch 中的组件之一。但是这些组件不会在 AppShell 中渲染，它们不会是 AppShell 的子级。

在 v4 中，为了包装组件，您不再将 Routes 放在另一个 Route 中，而是将 Routes 直接放在组件中。
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 组件，因为它在这里没有用。看看什么时候有用here。

【讨论】：

谢谢！像这样包装它：<Layout><Switch><Route/></Switch></Layout> 为我工作:)
没问题。如果您使用单个Route，则不需要Switch。 Switch 就像 ||运算符：Switch 语句中匹配路径的第一个 Route 被呈现，但 Switch 中的其他 Routes 未被呈现。我在评论中添加了指向Switch 文档的链接。
谢谢，很有用。
很好的解决方案。我
如何在 Layout 组件中获取 location 对象或 location.pathname（即this.props.location.pathname）？

【解决方案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>

每当历史记录发生变化时，ChatList 中的 componentWillReceiveProps 就会运行。

【讨论】：

【解决方案5】：

你也可以试试这个：

<Route exact path="/Home"
                 render={props=>(
                                 <div>
                                      <Layout/>
                                      <Archive/>
                                </div>
                       )} 
    />

【讨论】：