Una forma que encuentro que funciona para mí es simplemente verificar la URL actual de la ruta de la página con location.pathname y compararla con el nombre que desee, y luego aplicarle la clase adecuada.

Aquí hay un código de ejemplo:

 const pathMap = { '/': document.getElementById('home_nav'), '/about': document.getElementById('about_nav'), '/contact': document.getElementById('contact_nav'), '/projects': document.getElementById('projects_nav'), }; const path = location.pathname; if (pathMap[path]) { pathMap[path].classList.add('active'); }

Tienes que agregar este código donde sea que se encuentre tu barra de navegación. Tenga en cuenta que puede haber mejores formas de hacer esto, pero si solo ejecuta este código donde existe su barra de navegación, entonces no debería haber ningún problema. Otro inconveniente es que de esta manera no admite rutas anidadas, así que digamos que está en /projects/cat-hotel entonces no funcionará correctamente, por supuesto, puede hacer RegEx para resolver esto, pero solo le estoy mostrando un ejemplo.

He usado estas dos soluciones y me funcionaron bien.

https://css-tricks.com/forums/topic/how-to-keep-the-page-highlighted-on-the-nav-bar/

https://css-tricks.com/forums/topic/highlight-nav-links-when-scrolling-the-page/