Проблема, скрывающая навигационную панель с реагирующим маршрутизатором

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>} будет означать, что вы будете показывать навигацию, только если условие просмотра удовлетворено. Чтобы узнать больше об условной логике представления, посмотрите здесь

Если вы обнаружите, что ваше приложение становится более сложным. Вы можете настроить PrivateRoute согласно https://reacttraining.com/react-router/web/example/auth-workflow Это будет означать, что вы можете рассматривать маршруты по-разному исключительно на основе того, вошел ли пользователь в систему или нет.