Next.js 使用链接和路由器设置当前活动类

Question

I wanted to set an active class to the current page, but I'm missing something.

<Link href={`/projects/${project.id}`}>
  <a
    className={`${
      router.pathname === `/projects/${projects.id}`
        ? "active"
        : ""
    }`}
  >
    {project.title}
  </a>
</Link>

Not sure if this is the correct way, because when I console log router.pathname , I get /projects/[id]

Is this the correct way of doing this? or is there a better way?

Answer 1

You could use router.asPath in that sense.
https://nextjs.org/docs/api-reference/next/router#router-object
Just remember that it uses the literal path in the browser, with query strings and anchors.

Answer 2

Create an Active Classname

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

// we are providing here "href" as prop, children is <a/>
// activeLinkClass incase you want to provide different class in different pages. If you don't, default className "active"
export default function ActiveLink({ children, activeLinkClass, ...props }) {
  const { pathname } = useRouter();
  let className = children.props.className || "";
  // pathname=/marketplace
  if (pathname === props.href) {
    className = `${className} ${
      activeLinkClass ? activeLinkClass : "active"
    }`;
  }
  // we could write "children" but we would not be able to provide addional props
  //   this is wrapping <a>
  return <Link {...props}>{React.cloneElement(children, { className })}</Link>;
}

You can use this reusable component in any part of your project like this:

      <ActiveLink href={hrefOfPage}>
          <a>{project.title}</a>
        </ActiveLink>

as href , you get the current path of page, and it will be exact path. instead of [id] you will get the real Id, or if there is a query string you will also get the query string.