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

Question

我有一个包含多个选项卡（子项）的页面。我还更改了每个选项卡的 URL，但我仍在父页面上，只是更改选项卡的 URL。

问题是当我单击选项卡时，我无法保持父页面 NavLink 处于活动状态，因为它更改了 URL，但我想在选项卡 URL 上保持活动状态。

这该怎么做？

从“反应”导入反应；从'react-router-dom'导入{导航链接}；

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

你所要做的就是在isActivein里面写一个条件NavLink，如果当前页面 URL 与定义的 URL 匹配，则返回true否则返回false。使用里面的函数isActive，如果它返回true，你会得到活动链接..示例：

    isActive={ () => ['/example', '/exampl2'].inclues(currentPageUrl) }

如果当前 URL 在上面的数组中匹配，只要 URL 不匹配，您的 NavLink 就会处于活动状态。要查找当前页面 URL，请使用useLocation()钩子。

import React from 'react';
import { useLocation } from 'react-router-dom';

// Active the Link on two URLs

export default () => {

    // extract pathname from location
    const { pathname } = useLocation();

    return (
        <li className='Navigation__list-item'> 
            <NavLink 
                to="/events" 
                isActive={() => ['/events', '/myevents'].includes(pathname)} >
                Events 
            </NavLink> 
        </li>
    );
};