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 · May 16, 2023 · 9d07010 · 9d07010
1 parent 14108ea
commit 9d07010
Show file tree

Hide file tree

Showing 3 changed files with 138 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 { DevBanner } from './components/DevBanner'
@@ -207,6 +208,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>
@@ -223,7 +229,9 @@ function Document({ children }: { children?: React.ReactNode }) {
         <DevBanner />
         <Header />
         <NewsBanner message="GCN Circulars are now part of the new GCN!" />
-        <main id="main-content">{children}</main>
+        <main id="main-content" ref={ref}>
+          {children}
+        </main>
         <Footer />
         <ScrollRestoration />
         <Scripts />

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": "github:lpsinger/remix-utils#route-data-moved-npm-prepare",
     "spin-delay": "^1.1.0",
     "ts-dedent": "^2.2.0"
   },