I
I
Ihor S2021-01-22 13:18:29
React
Ihor S, 2021-01-22 13:18:29

Why doesn't NavLink work in react?

Doesn't switch NavLink, I don't know what the problem is, redirect works

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>
  )
}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question