Задать вопрос
volkovecgenei
@volkovecgenei
...

Как правильно отображать navbar в зависимости от роута?

Navbar должен убирать пункт "главная", если сейчас открыт этот роут. Как правильно это реализовать?

function App() {
  return (
      <HashRouter>
         <div className="app">
             <Navbar/>
             <Switch>
                 <Route path={'/'} exact component={Home} />
                 <Route path={'/projects'} component={Projects} />
                 <Route path={'/contacts'} component={Contacts} />
             </Switch>
         </div>
      </HashRouter>
  );
}


export const Navbar = () => {

    return (
        <nav className={'navbar app__navbar'}>
            <div className="navbar__wrapper flex flex--space-between container">

                <NavLink
                    className="logo__link"
                    exact
                    to={'/'}
                >
                    <div className="logo navbar__logo flex flex--center">
                        <span className="logo__span">Волков Евгений.</span>
                    </div>
                </NavLink>


                <ul className="navbar__list list flex flex--end">

                    <NavLink
                        className="navbar__elem navbar__link"
                        exact
                        to={'/'}
                        location
                    >
                        Главная
                    </NavLink>

                    <NavLink
                        className="navbar__elem navbar__link"
                        to={'/projects'}
                    >
                        Проекты
                    </NavLink>

                    <NavLink
                        className="navbar__elem navbar__link"
                        to={'/contacts'}
                    >
                        Контакты
                    </NavLink>

                </ul>
            </div>
        </nav>
    )
}
  • Вопрос задан
  • 81 просмотр
Подписаться 1 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Мидл фронтенд-разработчик
    5 месяцев
    Далее
  • Яндекс Практикум
    React-разработчик
    3 месяца
    Далее
  • Яндекс Практикум
    Фронтенд-разработчик
    10 месяцев
    Далее
Пригласить эксперта
Ответы на вопрос 1
@cython
Получаете location через useLocation, из location.pathname берёте текущий путь, далее делаете условный рендер, с проверкой того, что location.pathname !== '/'
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
ITK academy Нижний Новгород
от 80 000 до 120 000 ₽
ITK academy Воронеж
от 50 000 до 90 000 ₽