Tengo un problema extraño en el que un enlace dinámico dentro de un componente funciona en la mayoría de los lugares del sitio (páginas estáticas), pero no dentro de un componente React en particular: Algolia InstantSearch (funcionalmente muy similar a este componente: https://github.com/ algolia/react-instantsearch/blob/master/examples/next/components/app.js ).
He intentado usar el componente de enlace 'habitual', es decir:
<Link href={'/products/[permalink]'} as = {`/products/${permalink}`} passHref> .... </Link>Además de tratar de hacer uso del enlace useRouter como se describe aquí: https://mariestarck.com/a-beginners-guide-to-dynamic-routing-in-next-js/
const router = useRouter(); const ROUTE_PRODUCT_PERMALINK = "/products/[permalink]"; const navigate = (permalink) => router.push({ pathname: ROUTE_PRODUCT_PERMALINK, query: { permalink } }); return ( <a className="group relative" onClick={() => navigate(permalink)}>Al hacer clic, la URL cambia correctamente y parece que getInitialProps se ejecuta, pero la página actual no se desmonta. Esto solo ocurre cuando el componente es un elemento secundario de InstantSearch React Class.
¡¡Gracias!!
En realidad, esto resultó ser un problema con mi tema: ciertos ganchos dependían de una animación para desmontar (como parte de la biblioteca de movimiento del marco), que no se pasó al componente de la aplicación InstantSearch. Envolver mi página de resultados de búsqueda en <motion.div> pareció solucionar el problema; el problema no estaba relacionado con el enrutamiento en sí.