反応ルータのログインページでnavbarを非表示にするには

Question

ログインページでnavbarを非表示にしたいと思います。

私は実際に行ったが、他のページではナビゲーションバーが表示されません。

このコードは、My App.jsxファイルの一部です。

私はAppの状態で履歴を作成します。そして、このパス名が '/'または '/ login'のときはnavbarを隠します。

しかし、私はIDとパスワードを入力し、ログインボタンをクリックし、 '成功'結果を得て、 '/ main'に移動します。

メインコンポーネントのナビゲーションバーも表示されません。

どうすればいいですか？私を助けてください。

私の短い英語については残念です。あなたが私の質問を理解できない場合、あなたはコメントすることができます。

constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
    isAlertOpen: false, 
 
    history: createBrowserHistory(), 
 
    }; 
 
    this.toggleAlert = this.toggleAlert.bind(this); 
 
}

<BrowserRouter> 
 
    <div className="App"> 
 
    {this.state.history.location.pathname === '/' || this.state.history.location.pathname === '/login' ? null 
 
     : <Header toggleAlert={this.toggleAlert} />} 
 
    <div className="container"> 
 
     {this.state.history.location.pathname === '/' || this.state.history.location.pathname === '/login' ? null 
 
     : <Navbar />} 
 
     <Route exact path="/" render={() => <Redirect to="/login" />} /> 
 
     <Route path="/login" component={Login} /> 
 
     <Route path="/main" component={Main} /> 
 
     <Route path="/user" component={User} /> 
 
     <Route path="/hw-setting" component={Setting} /> 
 
     <Route path="/hw-detail/:id" component={HwDetail} /> 
 
     <Route path="/gas-detail/:id" component={GasDetail} /> 
 
     {this.state.isAlertOpen ? <Alert /> : null} 
 
    </div> 
 
    </div> 
 
</BrowserRouter>

login(event) { 
 
    event.preventDefault(); 
 
    userService.login(this.state.id, this.state.password).subscribe(res => { 
 
    if (res.result === 'success') { 
 
     global.token = res.token; 
 
     this.props.history.push('/main'); 
 
    } else { 
 
     alert(`[ERROR CODE : ${res.statusCode}] ${res.msg}`); 
 
    } 
 
});

Answer 1

LoginコンポーネントがHeader

よう

<BrowserRouter> 
    <Switch> 
    <div className="App"> 
    <Route exact path="/(login)" component={LoginContainer}/> 
    <Route component={DefaultContainer}/> 

    </div> 
    </Switch> 
</BrowserRouter> 

const LoginContainer =() => (
    <div className="container"> 
    <Route exact path="/" render={() => <Redirect to="/login" />} /> 
    <Route path="/login" component={Login} /> 
    </div> 
) 


const DefaultContainer =() => (
    <div> 
    <Header toggleAlert={this.toggleAlert} /> 
    <div className="container"> 
     <Navbar /> 
     <Route path="/main" component={Main} /> 
     <Route path="/user" component={User} /> 
     <Route path="/hw-setting" component={Setting} /> 
     <Route path="/hw-detail/:id" component={HwDetail} /> 
     <Route path="/gas-detail/:id" component={GasDetail} /> 
     {this.state.isAlertOpen ? <Alert /> : null} 
    </div> 
    </div> 
) 

を持たないように、あなたは違ったあなた Routesを構築することができ