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>
    )
}
  • Вопрос задан
  • 78 просмотров
Пригласить эксперта
Ответы на вопрос 1
@cython
Получаете location через useLocation, из location.pathname берёте текущий путь, далее делаете условный рендер, с проверкой того, что location.pathname !== '/'
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы