[SOLVED] next/link URL changing but page doesn't re-render

next/link URL changing but page doesn't re-render

I have an odd problem where a dynamic link inside a component works in most places on the site (static pages), but not inside a particular React Component - Algolia InstantSearch (functionally very similar to this component: https://github.com/algolia/react-instantsearch/blob/master/examples/next/components/app.js).

I've tried using the 'usual' Link component, i.e:

<Link href={'/products/[permalink]'}
      as = {`/products/${permalink}`}
      passHref> 
....
</Link>

Plus trying to make use of the useRouter hook as outlined here: 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)}>

Upon clicking, the URL changes correctly and getInitialProps appears to run, but the current page does not unmount. This only occurs when the component is a child of the InstantSearch React Class.

Thanks!!

Solution

This actually turned out to be an issue with my theme - certain hooks relied upon an animation to unmount (as part of the framer-motion library), which was not passed to the InstantSearch App component. Wrapping my Search Results page in <motion.div> appeared to fix the issue - the issue was not with the routing itself.