Enable client-side routing for all Markdown links

This results in much faster navigation when following links that are defined in .md or .mdx documents using `[markdown](syntax)`. See remix-run/remix#6048
nasa-gcn · Apr 13, 2023 · ad18674 · ad18674
1 parent ac71839
commit ad18674
Show file tree

Hide file tree

Showing 3 changed files with 136 additions and 5 deletions.
diff --git a/app/root.tsx b/app/root.tsx
@@ -38,8 +38,9 @@ import {
   useRouteError,
 } from '@remix-run/react'
 import { ButtonGroup, GovBanner, GridContainer } from '@trussworks/react-uswds'
-import type { ReactNode } from 'react'
+import { type ReactNode, useRef } from 'react'
 import TopBarProgress from 'react-topbar-progress-indicator'
+import { useDelegatedAnchors } from 'remix-utils'
 import { useSpinDelay } from 'spin-delay'
 
 import AnnounceBanner, { AnnouncementEvent } from './components/AnnounceBanner'
@@ -199,6 +200,11 @@ function Progress() {
 }
 
 function Document({ children }: { children?: React.ReactNode }) {
+  // Use client-side routing for anchors in Markdown content.
+  // See https://github.com/remix-run/remix/discussions/6048.
+  const ref = useRef<HTMLElement | null>(null)
+  useDelegatedAnchors(ref)
+
   return (
     <html lang="en-US">
       <head>
@@ -242,7 +248,7 @@ function Document({ children }: { children?: React.ReactNode }) {
         <GovBanner />
         <DevBanner />
         <Header />
-        <section className="usa-section main-content">
+        <section className="usa-section main-content" ref={ref}>
           <GridContainer>{children}</GridContainer>
         </section>
         <Footer />

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -57,6 +57,7 @@
     "react-router": "^6.10.0",
     "react-tag-autocomplete": "^7.0.0-rc.1",
     "react-topbar-progress-indicator": "^4.1.1",
+    "remix-utils": "^6.1.0",
     "spin-delay": "^1.1.0",
     "ts-dedent": "^2.2.0"
   },