Answer the question
In order to leave comments, you need to log in
How to correctly display the navbar depending on the route?
Navbar should remove the "home" item if that route is currently open. How to implement it correctly?
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>
)
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question