Proposal: `RouterProvider` for `Link` components

[thomasdigby]

Open to comments/suggestions.

This new provider would allow the component library to render React Router or Next.js Link in place of a. We currently use NavigateHandler to mimic the SPA behaviour in atom-core, but there are a few weird edge-cases and bugs that can only really be resolved by using Link components directly. This context layer allows any @atom-learning/components component to access the "Link", and we can still combine that internally with logic for internal/external URLs and rendering a or Link.

~I named it ComponentsProvider as I wanted it to be fairly generic and we don't really have a name for our component library. Very happy to rename, tweak the structure, props, etc.~

Renamed to RouterProvider to be specific about its intent, and React Aria has a similarly named component for the same purpose https://react-spectrum.adobe.com/react-aria/routing.html

Atom core

import { Link } from 'react-router-dom'
import { RouterProvider } from '@atom-learning/components'

const Providers = ({ children }) => (
  <RouterProvider Link={({ href, ...props }) => <Link to={href} {...props} />}>
    {/* Other Providers */}
    {children}
  </RouterProvider>
)

Marketing site

import RouterLink from 'next/link'
import { RouterProvider } from '@atom-learning/components'

const Providers = ({ children }) => (
  <RouterProvider Link={RouterLink}>
    {/* Other Providers */}
    {children}
  </RouterProvider>
)