Function based className for active route for ''next/link'

Feature request

Is your feature request related to a problem? Please describe.

I see a lot of people using a separate component, just for adding an active class when a route is active. My suggestion is the add functional support for className in the link component.

To give an example:

import Link from "./link";

// Example using classnames package.
import cx from "classnames";

<Link className={active => cx({ "text-gray-200": active })} href="/">
  <a>Home</a>
</Link>;

// Example using pure javascript.
<Link className={active => active && "text-gray-200"} href="/">
  <a>Home</a>
</Link>;

Describe the solution you’d like

My solution is to allow className to be both a string and a function; When then component identifies the className as a function, call the method with the first argument is a boolean if the route is active then true else false.

Describe alternatives you’ve considered

An alternative solution is to implement the component yourself, as I have done so far.

Another way would be creating a component with an activeClassName attribute but this prevents support for class IntelliSense in editors as VSCode.

The reason I suggest this is because as the latest releases show, next.js is all about zero-config and not too much complexity. So why not implement such used feature into the existing Link component.

Additional context

My current solution to this request is using a custom component.

Made a gist to my component and a small example here: https://gist.github.com/ch99q/b417990540d2ef91870e1af99ac6a516

[webdeb]

@agos

I’ve created a custom ActiveLink component:

import React from "react"
import { useRouter } from "next/router"

function ActiveLink({ children, href, as, activeClass }) {
  const router = useRouter()
  const active = router.pathname === href

  const onClick = e => {
    e.preventDefault()
    router.push(href, as)
  }

  if (typeof children === "function") {
    return children({ active, onClick })
  }

  const className = active
    ? children.props.className
      ? `${children.props.className} ${activeClass}`
      : activeClass
    : children.props.className

  return React.cloneElement(children, { className, onClick })
}

export default ActiveLink

haven’t tested it properly with 1.5.3, it is still using as but it works for my purposes right now.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.