reactjs - 如何在登录页面中隐藏标题组件reactJS

是ReactJS的新手。我想在“登录”页面中隐藏标题组件并在内部页面中显示。我有一个App.js，我已经使用了三元运算符，但是无法正常工作。

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>
        );
    }
}

如果呈现EmployeeLogin组件，我想隐藏标题导航
<HeaderNavContainer />如果不是，我想显示<HeaderNavContainer />

最佳答案

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

关于reactjs - 如何在登录页面中隐藏标题组件reactJS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50169198/