navlink in next js

Kenneth Onwuaha answered on March 22, 2023 Popularity 9/10 Helpfulness 4/10

answer navlink in next js

navlink in next js

Comment

navLink in nextjs

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

export { NavLink };

NavLink.propTypes = {
    href: PropTypes.string.isRequired,
    exact: PropTypes.bool
};

NavLink.defaultProps = {
    exact: false
};

function NavLink({ href, exact, children, ...props }) {
    const { pathname } = useRouter();
    const isActive = exact ? pathname === href : pathname.startsWith(href);

    if (isActive) {
        props.className += ' active';
    }

    return (
        <Link href={href}>
            <a {...props}>
                {children}
            </a>
        </Link>
    );
}

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: jasonwatmore.com

Tags: javascript next

Link to this answer
Share Copy Link

Contributed on Mar 22 2023

Kenneth Onwuaha

0 Answers Avg Quality 2/10

navlink in next js

Contents

More Related Answers

navlink in next js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.