Next.js links don't work inside toasts

🐛 Bug report

In my project I’ve created a Link component that wraps Chakra’s link component with Next.js’ as recommended. This component works fine when I use it in regular places inside my app, but breaks when used inside toasts. On click I get thrown the error “TypeError: can’t access property “push”, router is null”. I think it might have to do with the fact that toasts are placed inside a portal?

💥 Steps to reproduce

1. Go to the sandbox provided below
2. Explore implementation of Link component
3. Test the instances of Link within pages and confirm that they work
4. Trigger the toast and test that instance of Link
5. Observe error thrown by Next.js

💻 Link to reproduction

CodeSandbox reproduction: https://codesandbox.io/s/purple-wood-q6ug6

🧐 Expected behavior

I expect this link component pattern to work inside toasts too.

🌍 System information

Software	Version(s)
Chakra UI	1.4.1
Browser	N/A
Operating System	N/A

[mwmcode]

There is a todo comment in toast.class I think once it’s todo-ed, it might solve this issue

* @todo
*
* Update toast constructor to use `PortalManager`'s node or document.body.
* Once done, we can remove the `zIndex` in `toast.manager.tsx`

[yukukotani]

@kfranqueiro You can simply avoid this issue using toastOptions.portalProps.containerRef. I think this way is not as complicated as being called “workaround” and this issue can be closed.

sandbox: https://codesandbox.io/s/next-js-links-dont-work-inside-toasts-forked-k0m1o2

function App({ Component, pageProps }: AppProps) {
  const portalContainerRef = useRef();
  return (
    <>
      <div>
        <ChakraProvider
          toastOptions={{ portalProps: { containerRef: portalContainerRef } }}
        >
          <Component {...pageProps} />
        </ChakraProvider>
      </div>
      <div ref={portalContainerRef} />
    </>
  );
}