我有一个带有多个标签(子标签)的页面。我还更改了每个选项卡的URL,但仍在父页面上,只是更改了选项卡的URL。
问题是,当我单击选项卡时,我无法使父页面NavLink保持活动状态,因为它更改了URL,但我想在选项卡URL上保持活动状态。
该怎么做?
从'react'导入React; 从“ react-router-dom”导入{NavLink};
export default () => {
return (
<>
<nav className='Navigation'>
<ul className={`Navigation__list ${hide}`}>
<li className='Navigation__list-item'>
<NavLink to="/events" >Events</NavLink>
</li>
</ul>
</nav>
<Tabs />
</>
);
}
//将选项卡组件作为子项
export default function Tabs () => (
<ul className="events__tab">
<li> <NavLink to="/events"> All Events </NavLink> </li>
<li> <NavLink to="/myevents"> My Events </NavLink> </li>
</ul>
)
感谢您的预先支持!
答案 0 :(得分:1)
您要做的就是在isActive
的{{1}}内写一个条件,如果当前页面URL与定义的URL匹配,则返回NavLink
,否则返回true
。使用false
中的函数,如果返回true,则将获得活动的Link。
示例:
isActive
如果当前URL在“上方数组”中匹配,则只要URL不匹配,您的NavLink就会处于活动状态。
要查找当前页面的URL,请使用 isActive={ () => ['/example', '/exampl2'].inclues(currentPageUrl) }
钩子。
useLocation()