ReactJS登录页隐藏Header组件问题求助（附代码）

嘿，我看你遇到的问题是想用三元运算符控制Header的显示，但没生效对吧？核心问题出在你的判断条件上——你用EmployeeLogin这个组件本身作为判断依据，这肯定不对，因为组件在JS里会被视为真值，所以你的三元判断逻辑根本没根据当前路由来走。

下面给你两种靠谱的解决方案，都是基于React Router v5（因为你代码里用了Switch）：

方案一：用withRouter获取当前路由路径 #

这是类组件里最常用的方式，步骤很简单：

1. 首先导入withRouter高阶组件：

import { withRouter, Router, Switch, Route } from 'react-router-dom';

2. 修改你的App组件导出，用withRouter包裹：

export default withRouter(App);

3. 在render方法里，通过this.props.location.pathname判断当前是否在登录页，然后控制Header的显示：

class App extends Component {
  render(){
    // 判断当前路径是不是登录页
    const isOnLoginPage = this.props.location.pathname === '/EmployeeLogin';
    
    return (
      <div>
        <Router history={history}>
          <div>
            {/* 不是登录页就显示Header */}
            {!isOnLoginPage && <HeaderNavContainer />}
            <Switch>
              <Route path="/about" component={About} />
              <Route path="/EmployeeLogin" component={EmployeeLogin} />
              <Route path="/MyPreferences" component={MyPreferences} />
              {/* 其他路由继续写在这里 */}
            </Switch>
          </div>
        </Router>
      </div>
    )
  }
}

方案二：把Header放到路由组件内部（可选） #

如果你不想用withRouter，也可以把Header的显示逻辑拆分到各个内部页面组件里：

• 登录页组件EmployeeLogin里不渲染Header
• 其他页面组件（比如About、MyPreferences）里都渲染HeaderNavContainer

不过这种方式会有重复代码，不如第一种方案简洁。

为什么原来的代码不生效？ #

你之前写的let HideHeader = EmployeeLogin ? null : <HeaderNavContainer />，这里的EmployeeLogin是组件本身，在JavaScript中，只要它不是null、undefined、false这类假值，都会被判定为true，所以HideHeader永远是null——不管你在哪个页面，Header都不会显示，这就是你觉得没生效的原因。

内容的提问来源于stack exchange，提问作者Prashanth Harish