Почему не срабатывает NavLink в react?

Question

Ihor S @Ihor_S

Fullstack web developer

React

Почему не срабатывает NavLink в react?

Не переключает NavLink не знаю в чем проблема, срабатывает redirect

export default function AccountNavbar({ user,activeNav,setSubmitPopup,setEditAdId}) {
  let {path, url} = useRouteMatch();
  
  const handleNavClick = (activeNav) => {
    setEditAdId('')
  } 

  return (
    <div className='accountNavbar'>
      <div className="accountNavbar__content">
        <img src={accountPhoto} alt="photo" />
        <div className="accountNavbar__userName accountNavbar__itemText">
          {user.name && user.name}
        </div>
        /// NavLink  http://localhost:3000/account/myOffers роут
        <NavLink to={`/newOffer`} className={`accountNavbar__addNewOffer accountNavbar__item ${activeNav === 'newOffer' && 'accountNavbar__item--active'}`} onClick={() => handleNavClick('newOffer')}>
          <img src={plus} alt="icon" className='accountNavbar__itemIcon'/>
          <div className='accountNavbar__itemText--uppercase accountNavbar__itemText'>Добавить объявление</div>
        </NavLink>
        <NavLink to='/myOffers' className={`accountNavbar__myOffers accountNavbar__item ${activeNav === 'myOffers' && 'accountNavbar__item--active'}`} onClick={() => handleNavClick('myOffers')}>
          <img src={docOrange} alt="icon" className='accountNavbar__itemIcon'/>
          <p className='accountNavbar__itemText accountNavbar__itemText--uppercase '>Мои объявления:</p>
          <span className="accountNavbar__counter">
            {user.ads && user.ads.length}
          </span>
        </NavLink>
        <NavLink to='/favorites' className={`accountNavbar__favorites accountNavbar__item ${activeNav === 'favorites' && 'accountNavbar__item--active'}`} onClick={() => handleNavClick('favorites')}>
          <img src={favorites} alt="icon" className='accountNavbar__itemIcon'/>
          <p className="accountNavbar__favoritesText accountNavbar__itemText accountNavbar__itemText--uppercase">
            Избранное:
          </p>
          <span className='accountNavbar__counter'>
            {user.favoritesArr && user.favoritesArr.length}
          </span>
        </NavLink>
        <NavLink to='/settings' className={`accountNavbar__setting accountNavbar__item ${activeNav === 'settings' && 'accountNavbar__item--active'}`} onClick={() => handleNavClick('settings')}>
          <img src={settings} alt="icon" className='accountNavbar__itemIcon'/>
          <p className="accountNavbar__settingText accountNavbar__itemText accountNavbar__itemText--uppercase">
            Настройки
          </p>
        </NavLink>
        <div className="accountNavbar__logout accountNavbar__item" onClick={() => setSubmitPopup('exit')}>
          <img src={logout} alt="icon" className='accountNavbar__itemIcon'/>
          <p className="accountNavbar__logoutText accountNavbar__itemText accountNavbar__itemText--uppercase">
            Выйти
          </p>
        </div>
      </div>
    </div>
  )
}

export default function Routes() {

  return (
    <Switch>
      <Route path="/home/:nav" >
        <HomePage />
      </Route>
      <Route path="/account/:accountNav">
        <AccountPage />
      </Route>
      <Route path='/detailsAd/:adId' component={DetailsAdPage}/>
      <Route path='/auth' component={AuthPage} />
      <Redirect to='/home/saleBuy' />
    </Switch>
  )
}