隐藏带有反应路由器的导航栏

Question

进入注册页面时，我无法禁用导航栏。 我只希望导航栏在我的用户完成登录后显示，该登录具有路由“ /”。 任何帮助将非常感激。

  render() { return ( <App> <Main> <BrowserRouter> <div> <nav className="navbar navbar-expand-lg navbar-light bg-light"> <ul className="navbar-nav"> <li className="nav-item"> <NavLink to={"/"} className="nav-link" href="#">Log In</NavLink> </li> <li className="nav-item"> <NavLink to={"/home"} className="nav-link" href="#">Home</NavLink> </li> <li className="nav-item"> <NavLink to={"/"} className="nav-link" href="#">Log Out</NavLink> </li> </ul> </nav> <div className="content"> <Route exact path="/" render={() => <Splash />} /> <Route exact path="/main" render={() => <Main />} /> <Route exact path="/signup" render={() => <Signup />} /> </div> </div> </BrowserRouter> </Main> </App> ); } 

Answer 1

您可以使用this.props.location.pathname来检测当前的路线。

然后设置{this.props.location.pathname !== '/signup' && <nav> ... </nav>}将意味着您仅在满足查看条件时才显示导航。 要了解有关视图条件逻辑的更多信息，请点击此处

如果您发现自己的应用变得越来越复杂。 您可以按照https://reacttraining.com/react-router/web/example/auth-workflow设置PrivateRoute，这意味着您可以根据用户是否登录来纯粹地对待Routes。