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

Question

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

我的代码：

<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>

Answer 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>