ログインまたはサインアップページでnavbarを非表示にする方法

Question

私はreact-router v4を使用しています。これを使用してSPAを作成していますので、ナビゲーションメニューがすべてのページに表示されますが、ログインやサインアップページ。 はそれを行うには、とにかく何ですか？私はのlocalStorageを使用しますが、それは私のルートで常に以下

を隠されたままであることを

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

以下は私のナビゲーションバーコード

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

Answer 1

はあなたMainLayoutに起因していますコンポーネントのコンストラクタはこれを行います。あなたが何かに

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

this.props.locationを非表示にしたい、そのコンポーネントのためのあなたのcomponentDidMountで

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

はあなたのユーザーは、現時点ではされている現在のパスを告げるreact routerする方法です。あなたのrender（）メソッドで今

は、私はこのことができます願っています。この

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

ような何かを行います。乾杯:)

Answer 2

ヘルプ@ Adeelの助けを借りて、私は、私は、コードの下に追加私のヘッダーコンテナ内の溶液を把握するBLEだったと私は、ログイン時に非表示にする場合、それは私がこのロジックを記述する必要が

constructor(props) { 
    super(props); 
    this.state = { 
     visibility: true 
    }; 
    } 

    componentDidMount() { 
     let currentRoutes = this.props.location; 


if (currentRoutes.pathname === '/' || currentRoutes.pathname === '/signUp') { 

    this.setState({ visibility: false }); 
    } 

    this.props.dispatch(fetchProgramsData()); 
    this.props.dispatch(fetchCompany()); 
    } 
    componentWillReceiveProps(nextProps){ 
let currentRoutes = nextProps.location; 
    if (currentRoutes.pathname === '/' || currentRoutes.pathname === '/signUp') { 

    this.setState({ visibility: false }); 
    } 
    else 
     this.setState({ visibility: true }); 

    }