Answer the question
In order to leave comments, you need to log in
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 questionAsk a Question
731 491 924 answers to any question