1

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!!

thisiswootz
  • 41
  • 5
  • Apologies - can't seem to edit my original question to include the code but this is the page containing the main app component (which may be causing the router issues): https://codesandbox.io/s/exciting-violet-j3pcb?file=/pages/index.js – thisiswootz Dec 31 '21 at 14:21
  • 1
    Please provide a [mre]. – juliomalves Dec 31 '21 at 16:46
  • 1
    @juliomalves the issue actually materialised while creating an example - it seemed to work without framer-motion which helped me get to the root cause in my own code so thank you! – thisiswootz Jan 05 '22 at 21:26
  • Please trim your code to make it easier to find your problem. Follow these guidelines to create a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). – Community Jan 07 '22 at 13:43

1 Answers1

3

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.

thisiswootz
  • 41
  • 5