Cómo hacer scroll automático a un ID específico al abrir la URL en React

En este artículo, se describe un problema común en aplicaciones React que utilizan enlaces con HashLink para navegar a secciones específicas de una página. El problema observado es que al hacer clic en un enlace por primera vez, la página no se desplaza automáticamente a la sección deseada a menos que se recargue la página.

Estructura del Código

Nav.jsx

Este componente contiene enlaces a diferentes secciones de la página.

<HashLink smooth to="/#section1">
  <button>section1</button>
</HashLink>
<HashLink smooth to="/#section2">
  <button>section2</button>
</HashLink>
<HashLink smooth to="/#section3">
  <button>section3</button>
</HashLink>
<HashLink smooth to="/#section4">
  <button>section4</button>
</HashLink>
<HashLink smooth to="/#section5">
  <button>section5</button>
</HashLink>

App.jsx

Este componente principal incluye la navegación y define las rutas.

<main>
  <Nav/>
  <Routes>
    <Route exact path="/" element={<Home />} />
  </Routes>
</main>

Home.jsx

Aquí se definen las secciones con los respectivos IDs.

<section id="section1">this is section1 ...</section>
<section id="section2">this is section2 ...</section>
<section id="section3">this is section3 ...</section>
<section id="section4">this is section4 ...</section>
<section id="section5">this is section5 ...</section>

Problema

El problema identificado es que al hacer clic en un enlace por primera vez, la página no se desplaza automáticamente hacia la sección correspondiente. Esto requiere una recarga manual de la página para que funcione correctamente.

Comportamiento Esperado

Se espera que al hacer clic en cualquier enlace, la página se desplace automáticamente a la sección específica, similar a lo que se describe en la documentación de React Router.

Solución Propuesta

Una solución común para este problema implica el uso de un efecto secundario en el componente Home para manejar el desplazamiento cuando se carga la página:

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const Home = () => {
  const { hash } = useLocation();

  useEffect(() => {
    if (hash) {
      const element = document.getElementById(hash.replace('#', ''));
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    }
  }, [hash]);

  return (
    <>
      <section id="section1">this is section1 ...</section>
      <section id="section2">this is section2 ...</section>
      <section id="section3">this is section3 ...</section>
      <section id="section4">this is section4 ...</section>
      <section id="section5">this is section5 ...</section>
    </>
  );
};

Consideraciones Finales

Se observó que este problema persiste únicamente en el navegador Chrome, mientras que en Firefox funciona correctamente. Al implementar el efecto useEffect y manejar correctamente el desplazamiento, se soluciona el problema de navegación.