How to hide header component in login page reactJS

Question

Am new to ReactJS. I want to hide header component in Login page and show in inner pages. I have an App.js I have used ternary operator but not working.

class App extends Component {
    render(){
    let HideHeader = EmployeeLogin ? null : <HeaderNavContainer />
        return (
            <div>
                <Router history={history}>
                    <div>                    
                        {HideHeader}
                        <Switch>
                            <Route path="/about" component={About} />
                            <Route path="/EmployeeLogin" component={EmployeeLogin} />                        
                            <Route path="/MyPreferences" component={MyPreferences} />                        
                            <Route component={PageNotFound} />
                        </Switch>    
                    </div>    
                </Router>
            </div>
        );
    }
}

If EmployeeLogin component is rendered I want to hide header navigation <HeaderNavContainer /> if not I want to show <HeaderNavContainer />

Answer 1

在render您的方法中HeaderNavContainer，您可以执行以下操作：

render() {
  if (window.location.pathname === '/EmployeeLogin') return null;
  return <insert your header nav code>;
}

由于HeaderNavContainer包裹在中<Router>，因此window.location.pathname更改后会重新渲染。

另外，添加HeaderNavContainer到你的About，MyPreferences等而不是把在App。