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

在render的{{1}}方法中，您可以执行此操作：

HeaderNavContainer

由于render() { if (window.location.pathname === '/EmployeeLogin') return null; return <insert your header nav code>; }已包含在HeaderNavContainer中，因此<Router>更改后会重新呈现。

或者，将window.location.pathname添加到HeaderNavContainer，About等，而不是加入MyPreferences。

Answer 2

在组件中，您可以检查history.location.pathname是否等于/EmployeeLogin，然后返回null。您可以使用withReducer将历史对象作为道具。

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

Answer 3

而不是检查组件是否存在尝试检查URL是否被命中

在window.location.pathname中，您将获得当前网址。

让HideHeader = window.location.pathname ==='你的需要字符串'？ null：

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

3 个答案: