Как скрыть компонент заголовка на странице входа

Question

Я новичок в 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 />

Answer 1

В компоненте вы можете проверить, равен ли history.location.pathname значение /EmployeeLogin, а затем вернуть ноль. Вы можете использовать withReducer для получения объекта истории в качестве реквизита.

render(){
  if(this.props.history.location.pathname==='/EmployeeLogin'){
    return null;
  }   
  return (//your navigation component code.)
}

Answer 2

Вместо того, чтобы проверять, существует ли компонент или нет, попробуйте проверить, ударил или нет URL

В window.location.pathname вы получите текущий URL.

let HideHeader = window.location.pathname === 'ваша нужная строка'? null:

Answer 3

В методе 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.