javascript - React router dom在一种情况下显示公共(public)组件并在另一种情况下隐藏

Question

当用户打开 '/' 或 '/details' 路由时，我尝试在我的路由中使用通用的 Header 组件。另外，我不想在用户打开 '/menu' 路由时显示这个常见的 Header 组件。

这是我的代码:

<Router>
  <Switch>
    <Header />
    <Route exact path="/">
      <Home />
    </Route>
    <Route exact path="/details">
      <Details />
    </Route>
  </Switch>
  <Switch>
    <Route exact path="/menu">
      <Menu />
    </Route>
  </Switch>
</Router>;

在这种情况下，即使我加载 '/menu' 路由，我也会看到常见的 Header 组件，这不是我想要做的。我做错了什么？

Answer 1

该组件<Header />在定义路由的全局级别中，因此它对每个组件都可见。您可以做的是为每个页面定义一个布局，而不是这种方法，就像在主页中一样:

render() {
    return(
       <div>
          <Header />
             { this.props.children }
             /* anything else you want to appear on every page that uses this layout */
          <Footer />
       </div>
    );
}

在菜单中您可以删除标题:

render() {
    return(
       <div>
             { this.props.children }
             /* anything else you want to appear on every page that uses this layout */
          <Footer />
       </div>
    );
}

希望对你有帮助