javascript 如何在反应路由器的登录页面中隐藏导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47281850/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide navbar in login page in react router
提问by Jong-Hyen Kim
I want to hide the navbar in a login page.
我想在登录页面中隐藏导航栏。
I did it actually, but I can't see the navbar on other pages.
我确实做到了，但我在其他页面上看不到导航栏。
This code is part of My App.jsx file.
此代码是 My App.jsx 文件的一部分。
I make history in App's state. And I hide navbar, when this pathname is '/' or '/login'.
我在 App 的状态下创造了历史。当此路径名为“/”或“/login”时，我会隐藏导航栏。
It works!
有用！
But then I typed the ID and password, and clicked the login button, got 'success' result, and navigated to '/main'.
但是后来我输入了 ID 和密码，然后单击了登录按钮，得到了“成功”结果，然后导航到了“/main”。
Now I can't see navbar in main component too.
现在我也看不到主要组件中的导航栏。
How can I do this?
我怎样才能做到这一点？
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}`);
}
});
回答by Shubham Khatri
You could structure your Routesdifferently so that the Logincomponent doesn't have the HeaderLike
你可以用Routes不同的方式构造你的Login组件，这样组件就没有HeaderLike
<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>
)
