Как проверить, точно ли ссылка NextJS активна с хэшем? ⇐ Javascript

[Anonymous]

Я использую NextJs с Shadcn и хотел бы выделить активную ссылку. Моя страница индекса содержит некоторые DOV с якорными тегами, поэтому существует несколько маршрутов < /p>

• Код: Выделить всё

  /

• Код: Выделить всё

  /#section-1

• Код: Выделить всё

  /#section-2

• ...

I created a link component that should check if there is an exact match
"use client";

import clsx from "clsx";
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 (

{title}

);
}
< /code>
К сожалению, это еще не правильно. При посещении приложения в разделе 1 < /code> выделение работы. Но при запуске /< /code>, а затем навигации по /#Раздел 1 < /code>, маршрут индекса остается выделенным, и маршрут раздела не будет выделен. Так что я думаю, что при изменении хэша нет триггера для ререндера.
Есть ли у вас идеи, как исправить это поведение?>

Подробнее здесь: https://stackoverflow.com/questions/797 ... -with-hash