React Router v4 中的嵌套路由

Posted 2023-02-21

【中文标题】React Router v4 中的嵌套路由

【英文标题】：Nested Routes in React 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的可能重复

【参考方案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>
                       ) 
    />