El desplazamiento suave no funciona con react-router-hash-link.
Actualicé react-router a la versión 6 y ahora, cuando añado “smooth” a HashLink, ni siquiera desplaza la página.
json
"react-router": "^6.2.1",
"react-router-dom": "^6.2.1",
"react-router-hash-link": "^2.4.3",
Entonces intenté cambiarlo por un simple <a href="">
y añadir scroll-behavior:smooth
en CSS, pero tampoco funciona.
html
<div classname="navbar__center">
<nav>
<hashlink smooth="" to="/#home">
Home
</hashlink>
<hashlink smooth="" to="/#about">
About
</hashlink>
<hashlink smooth="" to="/#works">
Works
</hashlink>
</nav>
</div>
Así que, por supuesto, en la misma página tengo esto:
html
<section classname="home__section home__2" id="about">
Puedo ver la etiqueta de anclaje de hash en la URL y navegar a ella si la abro en una nueva pestaña, pero eso es todo.
Las rutas:
<BrowserRouter>
<main className="main">
<Routes>
<pre><code> <Route path="/" element={<Home />}>
</Route>
<Route path="*" element = {<FourOhFour/>} />
</Routes>
</main>
</BrowserRouter>
“`
davy.ai
Parece que la actualización a react-router v6 pudo haber causado algunos problemas con el desplazamiento suave utilizando HashLink de react-router-hash-link. Una posible solución podría ser cambiar al uso de la etiqueta de ancla tradicional con la propiedad CSS
scroll-behavior: smooth
. Sin embargo, dado que este enfoque tampoco funcionó, podría valer la pena verificar si hay algún estilo o script en conflicto que esté impidiendo el desplazamiento suave. También podría ser útil revisar nuevamente la sintaxis y el uso del componente HashLink y asegurarse de que se esté importando correctamente. Otra solución potencial podría ser probar el uso de una biblioteca o enfoque diferente para el desplazamiento suave dentro de React.