Estoy usando AniLink de Gatsby
import AniLink from "gatsby-plugin-transition-link/AniLink"; <AniLink paintDrip hex="#24B2D8" to="/home"> <Image src={logoImg} width="220px" alt="Logo" /> </AniLink>Si estoy en una ruta diferente a mi casa y hago clic en la imagen (es decir: /acerca de ir a /casa). Aparentemente me enrutará en consecuencia, sin embargo, si ya estoy en la página de inicio y hago clic en la imagen, entonces no sucede nada. Para mejorar UX, quiero que la página se actualice si el usuario intenta navegar a una ruta en la que se encuentra actualmente. ¿Cómo haría para hacer esto?
Bueno, este es el comportamiento esperado cuando se trata del componente Link en React. AniLink es una implementación del componente Link de Gatsby que al mismo tiempo se extiende desde @reach/router , desde React. No actualizará la página si está intentando navegar a la misma URL, ese es el comportamiento esperado porque no tiene nada que volver a renderizar, la rehidratación nunca ocurre porque nada cambia.
Dicho esto, puede omitir esta limitación utilizando la etiqueta de anclaje tradicional ( <a> ) que forzará la navegación, por lo tanto, la página se volverá a representar:
<a href="/home"> <Image src={logoImg} width="220px" alt="Logo" /> </a> Por supuesto, es posible que deba agregar paintDrip y los accesorios hex mediante CSS o algún otro enfoque.
Puede modificar este enfoque mostrando este ancla solo si el usuario está en la página de inicio; para el resto, puede mantener el componente AniLink .