如何在登录或注册页面反应路由器中隐藏导航栏 [英] How to hide navbar in login or signup page reactn router

问题描述

我正在使用 react-router v4 我正在使用它创建 SPA，所以我的导航菜单出现在所有页面中，但我不希望它出现在我的登录或注册页面中.无论如何要做吗?我使用了localStorage，但由于它始终处于隐藏状态

在我的路线下方

ReactDOM.render(<提供者商店={商店}><BrowserRouter basename="/sephoraweb"><div><HeaderContainer/><路由精确路径="/" component={LoginContainer} hideNavBar={true}/><Route path="/signUp" component={SignUpContainer}/>

</BrowserRouter></提供者>,document.getElementById('root'));

下面是我的导航栏代码

 render() {如果(！this.props.programList){return <Spinner name="circle"/>;}if(!localStorage.getItem("token") || localStorage.getItem("token") == undefined)返回空；const programValues = this.props.programList;返回 <NavBar 程序={programValues}/>;}}

解决方案

在您的 MainLayout 组件的构造函数中执行此操作.

构造函数(){this.state = {isNavbarHidden: 假};}

在你想要隐藏某些东西的那个组件的 componentDidMount 中

componentDidMount(){const currentRoute = this.props.location;if (currentRoute === 'YOUR_ROUTE_NAME') {this.setState({ isNavbarHidden: true });}}//componentDidMount 结束

this.props.location 是 react router 的一种方法，它告诉你用户当前所在的当前路径.

现在在你的 render() 方法中做这样的事情

render() {const { isNavbarHidden } = this.state;返回 (<div>{!isNavbarHidden &&<NavbarComponent/>}{/* 你剩下的代码在这里 */}{this.props.children}

);}

我希望这会有所帮助.干杯:)

I am using react-router v4 I am creating SPA using that so my navigation menu comes in all page but I don't want it to appear in my login or sign up page. is there anyway to do it?I used localStorage but due to that it remains hidden always

below in my route

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter basename="/sephoraweb">
      <div>
        <HeaderContainer />


        <Route exact path="/" component={LoginContainer} hideNavBar={true} />
        <Route path="/signUp" component={SignUpContainer} />

      </div>
    </BrowserRouter>
 </Provider>,
  document.getElementById('root')
);

and below is my navbar code

 render() {
    if (!this.props.programList) {
      return <Spinner name="circle" />;
    }
    if(!localStorage.getItem("token") || localStorage.getItem("token") == undefined)
       return null;
    const programValues = this.props.programList;

    return <NavBar programs={programValues} />;
  }
}

解决方案

In your MainLayout component's constructor do this.

constructor () {
  this.state = {
    isNavbarHidden: false
  };
}

In your componentDidMount for that component where you want to hide something

componentDidMount () {
  const currentRoute = this.props.location;
  if (currentRoute === 'YOUR_ROUTE_NAME') {
    this.setState({ isNavbarHidden: true });
  }
} // end of componentDidMount

this.props.location is a method of react router which tells you the current path on which the user is at the moment.

Now in your render() method do something like this

render () {
    const { isNavbarHidden } = this.state;
    return (
       <div>
          {!isNavbarHidden && <NavbarComponent />}
          { /* Your rest of the code here *//}
          {this.props.children}
       </div>
    );
}

I hope this helps. Cheers :)

这篇关于如何在登录或注册页面反应路由器中隐藏导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！