E
E
Evgeniy V.2020-09-12 17:30:29
React
Evgeniy V., 2020-09-12 17:30:29

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

1 answer(s)
C
cython, 2020-09-12
@cython

Get the location via useLocation , take the current path from location.pathname , then do a conditional render, checking that location.pathname !== '/'

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question