Estoy creando un sitio de cartera con gatsby donde tengo una barra lateral a la izquierda con algunos enlaces (Inicio, acerca de, trabajo, etc.) y a la derecha está el contenido principal, que es una tira larga de secciones. Al hacer clic en un enlace, simplemente se desplaza a esa sección. Me gustaría que un enlace tuviera un estilo diferente cuando el usuario llega a esa sección. Encontré una solución en javascript de vainilla para aplicar el estado activo que funciona, pero no sé cómo hacerlo de la manera de reacción.

 useEffect(() => { const navbarlinks = document.querySelectorAll("nav a"); const navbarlinksActive = () => { let position = window.scrollY + 200; navbarlinks.forEach((navbarlink) => { let section = document.querySelector(navbarlink.hash); if (position >= section.offsetTop && position <= section.offsetTop + section.offsetHeight) { navbarlink.classList.add("active"); } else { navbarlink.classList.remove("active"); } }); }; window.addEventListener("load", navbarlinksActive); document.addEventListener("scroll", navbarlinksActive); return () => { window.removeEventListener("load", navbarlinksActive); document.removeEventListener("scroll", navbarlinksActive); }; }, []);

Estoy seleccionando todos los enlaces de navegación, luego recorriéndolos, obteniendo la propiedad hash, que coincidirá con la identificación de la sección correspondiente que luego se selecciona. Luego, la clase se agrega o elimina según su posición. Este código está en el componente de la barra lateral donde también están mis enlaces, que son elementos Gatsby Link.

 return ( <nav> <Link className="hover:text-clr-accent flex items-center py-2 px-4 transition" to="#home" > <i className="fa-solid fa-house w-6 text-center text-lg"></i> <span className="pl-2 text-lg">Home</span> </Link> <Link className="hover:text-clr-accent flex items-center py-2 px-4 transition" to="#resume" > <i className="fa-solid fa-file w-6 text-center text-lg"></i> <span className="pl-2 text-lg">Resume</span> </Link> <Link className="hover:text-clr-accent flex items-center py-2 px-4 transition" to="#about" > <i className="fa-solid fa-address-card w-6 text-center text-lg"></i> <span className="pl-2 text-lg">About me</span> </Link> <Link className="hover:text-clr-accent flex items-center py-2 px-4 transition" to="#work" > <i className="fa-solid fa-briefcase w-6 text-center text-lg"></i> <span className="pl-2 text-lg">My work</span> </Link> </nav> );