如何在 React 中创建多个布局？

Posted 2023-02-22

【中文标题】如何在 React 中创建多个布局？

【英文标题】：How to create multiple layouts in React?

【发布时间】：2021-07-30 04:02:26

【问题描述】：

我想实现这样的目标：我不会在我的登录页面中显示页眉和页脚，但主布局将保持不变。在路线之间使用不同的布局？我怎样才能实现这样的目标？

我的代码：

<Router history=history>
        <Header>
            <Switch>
                <Route component=Home path="/" exact />
                <Route path="/about" component=AboutPage />
                <Route path="/community" exact />
                <Route path="/login" exact component=LoginPage />
                <Route path="/signup" exact component=LoginPage />
                <Route path="/members" component=Members />
                <Route component=NoMatch />
            </Switch>
        </Footer>
    </Router>

【问题讨论】：

你为什么要用</Footer>关闭<Header>？

【参考方案1】：

简单。在更高级别添加另一个 Switch，如果匹配则渲染您的登录路由，否则渲染其余路由。

<Router history=history>
  <Switch>
    <Route path="/login" exact component=LoginPage />
    <Route>
      <Header />
      <Switch>
        <Route component=Home path="/" exact />
        <Route path="/about" component=AboutPage />
        <Route path="/community" exact />
        <Route path="/signup" exact component=LoginPage />
        <Route path="/members" component=Members />
        <Route component=NoMatch />
      </Switch>
      <Footer />
    </Route>
  </Switch>
</Router>

【讨论】：

同样的问题：为什么要关闭 <Header> 和 </Footer>？

这种方式呈现空白页