Question

我有一个带有多个标签（子标签）的页面。我还更改了每个选项卡的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>
)

感谢您的预先支持！

Answer 1

您要做的就是在isActive的{{1}}内写一个条件，如果当前页面URL与定义的URL匹配，则返回NavLink，否则返回true。使用false中的函数，如果返回true，则将获得活动的Link。示例：

isActive

如果当前URL在“上方数组”中匹配，则只要URL不匹配，您的NavLink就会处于活动状态。要查找当前页面的URL，请使用isActive={ () => ['/example', '/exampl2'].inclues(currentPageUrl) }钩子。

useLocation()

NavLink在React Router DOM中的多个URL的同一链接上处于活动状态

1 个答案: