Breaking News: Grepper is joining You.com. Read the official announcement!

activeClassName in next.js

Rasel Hossain answered on December 1, 2021 Popularity 9/10 Helpfulness 8/10

answer activeClassName in next.js

related activeClassName in next.js

activeClassName in next.js

Comment

import Link from "next/link";
import { useRouter } from "next/router";


export const MyNav = () => {

  const router = useRouter();

  return (
    <ul>
      <li className={router.pathname == "/" ? "active" : ""}>
        <Link href="/">home</Link>
      </li>
      <li className={router.pathname == "/about" ? "active" : ""}>
        <Link href="/about">about</Link>
      </li>
    </ul>
  );
};

Popularity 9/10 Helpfulness 8/10 Language javascript

Source: stackoverflow.com

Tags: javascript next.js

Link to this answer
Share Copy Link

Contributed on Dec 01 2021

Rasel Hossain

0 Answers Avg Quality 2/10

Closely Related Answers

activeClassName in next.js

Comment

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

const ActiveLink = ({ children, activeClassName, ...props }) => {
  const { asPath } = useRouter()
  const child = Children.only(children)
  const childClassName = child.props.className || ''

  // pages/index.js will be matched via props.href
  // pages/about.js will be matched via props.href
  // pages/[slug].js will be matched via props.as
  const className =
    asPath === props.href || asPath === props.as
      ? `${childClassName} ${activeClassName}`.trim()
      : childClassName

  return (
    <Link {...props}>
      {React.cloneElement(child, {
        className: className || null,
      })}
    </Link>
  )
}

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

export default ActiveLink

Popularity 8/10 Helpfulness 2/10 Language javascript

Source: devarama.com

Tags: next.js javascript n

Link to this answer
Share Copy Link

Contributed on Mar 26 2022

Better Bug

0 Answers Avg Quality 2/10

activeClassName in next.js

Contents

More Related Answers

activeClassName in next.js

Closely Related Answers

activeClassName in next.js

Grepper

Documentation

Social

Legal

Contact

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