如何在反应路由器的登录页面中隐藏导航栏 [英] How to hide navbar in login page in react router

问题描述

我想在登录页面中隐藏导航栏。

I want to hide navbar in login page.

我实际上是这样做的，但我在其他页面看不到导航栏。

I did it actually, but I can't see navbar at other page.

此代码是My App.jsx文件的一部分。

This code is part of My App.jsx file.

我在App的状态下创建历史记录。当我的路径名为'/'或'/ login'时，我会隐藏导航栏。

I make history in App's state. And i hide navbar, when this pathname is '/' or '/login'.

它有效！

但我键入了id和密码，点击登录按钮，得到'成功'结果，导航到'/ main'。

But I typed id and password, and click login button, got 'success' result, navigate to '/main'.

我也看不到主要组件中的导航栏。

I can't see navbar in main component too.

我该怎么办？请帮助我。

How can i do for this. Please help me.

对我的英文短语感到抱歉。如果你无法理解我的问题，你可以发表评论。

Sorry about my short english. If you can't understand my question, you can comment.

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}`);
    }
});

推荐答案

您可以构建路线以不同的方式使 Login 组件没有标题赞

You could structure your Routes differently so that the Login component doesn't have the Header Like

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

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