How to check if NextJs Link is exactly active with hash?

[jtuchel]

Summary

I would like to highlight the active link. My index page contains some divs with anchor tags so there are several routes

• /
• /#section-1
• /#section-2
• ...

I created a link component that should check if there is an exact match

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";

interface Props {
	href: string;
	title: string;
}

export default function NavigationLink({ href, title }: Props) {
	const pathname = usePathname();
	const [hash, setHash] = useState("");

	useEffect(() => {
		const updateHash = () => setHash(window.location.hash);
		updateHash();
		window.addEventListener("hashchange", updateHash);
		return () => window.removeEventListener("hashchange", updateHash);
	}, []);

	const [basePath, anchor] = href.split("#");
	const isSamePath = pathname === basePath;
	const isSameAnchor = anchor ? hash === `#${anchor}` : hash === "";
	const isActive = isSamePath && isSameAnchor;

	return (
		<Link href={href}>
			{isActive}
		</Link>
	);
}

Unfortunately this is not 100% correct yet. When visiting the app on /#section-1 the highlighting works. But when starting on / and then navigating to /#section-1 the index route remains highlighted and the section route won't be highlighted. So I guess there is no trigger for a rerender when the hash changes.

Do you have any ideas how to fix this behaviour?

If there is an already builtin NextJs solution for this please let me know!

Additional information

No response

Example

No response

[icyJoseph]

The CSS :target selector can do that, https://codepen.io/matude/pen/OQrryP

Edit: Always a harsh reminder that:

This event does not fire when the hash is modified using history.pushState() or history.replaceState().

• https://developer.mozilla.org/en-US/docs/Web/API/Window/hashchange_event

That means that a plain <a> would do, but IIRC it doesn't play nicely with the fwd/back, might be wrong there.

"use client";

import Link from "next/link";
import { usePathname, useSelectedLayoutSegment } from "next/navigation";
import { useEffect, useState } from "react";

interface Props {
  href: string;
  title: string;
}

export default function NavigationLink({ href, title }: Props) {
  useSelectedLayoutSegment()
  const pathname = usePathname();
  const [hash, setHash] = useState("");

  useEffect(() => {
    setHash(window.location.hash);
  });

  const [basePath, anchor] = href.split("#");
  const isSamePath = pathname === basePath;
  const isSameAnchor = anchor ? hash === `#${anchor}` : hash === "";
  const isActive = isSamePath && isSameAnchor;

  return (
    <Link href={href}>
      {isActive.toString()}
    </Link>
  );
}

This one works though 👀

[jtuchel]

Yes, this is awesome 👀

For me your code snippet works! :)

"use client";

import Link from "next/link";
import { usePathname, useSelectedLayoutSegment } from "next/navigation";
import { useEffect, useState } from "react";
import clsx from "clsx";

interface Props {
  href: string;
  title: string;
}

export default function NavigationLink({ href, title }: Props) {
  useSelectedLayoutSegment()
  const pathname = usePathname();
  const [hash, setHash] = useState("");

  useEffect(() => {
    setHash(window.location.hash);
  });

  const [basePath, anchor] = href.split("#");
  const isSamePath = pathname === basePath;
  const isSameAnchor = anchor ? hash === `#${anchor}` : hash === "";
  const isActive = isSamePath && isSameAnchor;

	return (
		<Link
			href={href}
			aria-current={isActive ? "page" : undefined}
			className={clsx(
				"text-sm transition-colors duration-300",
				isActive
					? "leading-none font-medium"
					: "not-hover:text-muted-foreground",
			)}
		>
			{title}
		</Link>
	);
}

[icyJoseph]

It is a bit hacky, but it looks like useSelectedLayoutSegment renders for any router change 🤔