ActiveLink

import React, {Children} from 'react';
import {useRouter} from 'next/router';
import PropTypes from 'prop-types';
import Link from 'next/link';

const ActiveLink = ({children, notActive, activeClassName, href, as}) => {
    const router = useRouter();
    const child = Children.only(children);
    const childClassName = child.props.className || '';
    let className;

    className = router.asPath === as
        ? `${childClassName} ${activeClassName}`.trim()
        : childClassName;

    return (
        <Link href={href} as={as}>
            {React.cloneElement(child, {
                className: className || null,
            })}
        </Link>
    )
};

ActiveLink.propTypes = {
    activeClassName: PropTypes.string.isRequired,
};

export default ActiveLink

routesConfig

{
        href: '/portfolio',
        as: '/portfolio',
        label: 'Портфолио',
        subMenu: [
            {
                label: 'Фото:',
                subMenu: [
                    {
                        href: '/portfolio/[categories]',
                        as: '/portfolio/paired-photos',
                        label: 'Парные'
                    },
                    {
                        href: '/portfolio/[categories]',
                        as: '/portfolio/wedding-photos',
                        label: 'Свадебные'
                    },
                    {
                        href: '/portfolio/[categories]',
                        as: '/portfolio/family-photos',
                        label: 'Семейные'
                    },
                ]
            },
            {
                href: '/portfolio',
                as: '/portfolio#portfolio-video',
                label: 'Видео',
            },
        ]
    },

render

<ul className='menu-list' ref={menuListRef}>
                            {data.map(item => {
                                return (
                                    <li key={item.label} className='menu-list__item'>
                                    <span onClick={() => handleClickMenuItem(item.href)}>
                                        <ActiveLink activeClassName="active-link" href={item.href} as={item.as}>
                                            <a className="nav-link">{item.label}</a>
                                        </ActiveLink>
                                    </span>
                                        {item.subMenu &&
                                        <ul className='menu-list menu-list_nested'>
                                            {item.subMenu.map(item => {
                                                return (
                                                    <li key={item.label} className='menu-list__item'>
                                                        <span onClick={() => handleClickMenuItem(item.href)}>
                                                            {!item.href
                                                                ? <a>{item.label}</a>
                                                                : <ActiveLink
                                                                    notActive={item.notActive}
                                                                    activeClassName='active-link'
                                                                    href={item.href}
                                                                    as={item.as} >
                                                                    <a className="nav-link">{item.label}</a>
                                                                </ActiveLink>}
                                                        </span>
                                                    </li>
                                                )
                                            })}
                                        </ul>}
                                    </li>
                                )
                            })}
                        </ul>