href #contact jest nadpisywany do 'http://localhost:3000/#contact'

Tworze aplikacje w reactJS i w pewnym momencie mam menu z tagami a.

 return (
              <a
                key={index}
                href={item.href}
                className='mw-toc--item flex items-center text-lg font-medium text-foreground transition-colors hover:text-foreground/80 sm:text-sm'
              >
                <span
                  className={cn(
                    isActive &&
                      'mw-toc--active bg-gradient-to-r from-violet-500 to-purple-400 bg-clip-text font-bold text-transparent'
                  )}
                  onClick={() => handleTocItemClick(item.id!)}
                >
                  {item.title}
                </span>
              </a>
            );

Pozniej robie tak:

  useEffect(() => {
    document.querySelectorAll('header .mw-toc--item').forEach((anchor) => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        document
          ?.querySelector((anchor as HTMLAnchorElement).href)!
          .scrollIntoView({ behavior: 'smooth' });
      });
    });
  });

Czyli dodaje event listener pobierajac wartosc href. Tutaj niestety ten href juz nie jest #contact ja przy tworzneiu a tylko http://localhost:3000/#contact'. Jak to naprawic

Powinieneś użyć właściwości hash zamiast href

https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/hash