Convert Markdown links to <Link> components

[lpsinger]

In .md and .mdx routes, links that are written in Markdown syntax like [link text](url) are rendered as HTML <a> elements, so they do not participate in Remix's nice client-side routing. It would be very nice if links in Markdown were rendered as <Link> components.

[sergiodxa]

You could use https://github.com/sergiodxa/remix-utils#delegate-anchors-to-remix to make them work like Link

[lpsinger]

How would I deploy this for .md routes?

[sergiodxa]

Create a pathless layout route that wraps your .md routes and put it there.

[lpsinger]

useDelegatedAnchors requires a ref, but the <Outlet/> component does not have a ref property. How would I apply useDelegatedAnchors to child routes?

[sergiodxa]

wrap in a div with a ref

let ref = useRef<HTMLDivElement>(null)
useDelegatedAnchors(ref)
return <div ref={ref}><Outlet /></div>

or use PrefetchPageAnchors

return <PrefetchPageAnchors><Outlet /></PrefetchPageAnchors>

It uses useDelegatedAnchors for you wrapping the content in a div, and also supports prefetching links.

[lpsinger]

This solution isn't working in Remix 1.15.0. @sergiodxa, would you please merge sergiodxa/remix-utils#187?

[lpsinger]

#7502 would permit a much simpler solution.