Question

I'm having trouble disabling the navbar when I'm in the sign up page. I only want the navbar to show after my user finishes login which has the route '/ '. Any help would be much appreciated.

  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>}意味着只有在满足视图条件时才会显示导航。要了解有关视图条件逻辑的更多信息，请查看here

如果您发现自己的应用变得更加复杂。您可以根据https://reacttraining.com/react-router/web/example/auth-workflow设置PrivateRoute 这意味着如果用户已登录，您可以完全根据路径处理路由。

Trouble hiding nav bar with react router

1 个答案: