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

【问题标题】：NavLink active on same link for multiple URLs in React Router DOMNavLink 在 React Router DOM 中的多个 URL 的同一链接上处于活动状态
【发布时间】：2020-09-25 10:49:47
【问题描述】：

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

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

如何做到这一点？

从“反应”导入反应；从 '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>
)

提前感谢您的支持！

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

你所要做的就是在NavLink中的isActive中写一个条件，如果当前页面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>
    );
};

【讨论】：

成功了。谢谢