如何创建一个条件以不在我的一条路线中呈现我的 Header 组件答案

【问题标题】：How to create a condition to not render my Header component in one of my Route如何创建一个条件以不在我的一条路线中呈现我的 Header 组件
【发布时间】：2019-09-26 16:56:46
【问题描述】：

我正在尝试为我的应用程序（React）创建一些规则，不要为我的登录和注册组件呈现页眉和页脚。

我正在尝试获取一些变量（如路径）并检查，但没有工作。我不想在其他组件中使用组件（页眉和页脚）。

<Header/>
  <Router>
    <div>
      <Route exact path='/' component={HomePage} />
      <Route exact path='/signin' component={SignInPage} />
      <Route exact path='/signup' component={SignUpPage} />
    </div>
  </Router>
<Footer/>

【问题讨论】：

为特定的路由/组件分别提供页眉和页脚。
您能否添加整个文件，以便我们查看您的exports 是如何设置的？

标签： reactjs react-router

【解决方案1】：

添加一个父 Route 来呈现您的 Header、Footer 和其他路由，然后根据 pathname 创建一个条件。

<Router>
    <Header />
      <Route
        render={props => (  
          <>
            {props.location.pathname !== '/signin' ? <Header /> : null}
            <Switch>
              <Route exact path="/" component={HomePage} />
              <Route exact path="/signin" component={SignInPage} />
              <Route exact path="/signup" component={SignUpPage} />
            </Switch>
            <Footer />
          </>
        )}
      />
    <Footer />
  </Router>

【讨论】：