From 9d07010bfcac6df50e43c27ebcf628d46859cd5f Mon Sep 17 00:00:00 2001 From: Leo Singer Date: Thu, 13 Apr 2023 12:22:11 -0400 Subject: [PATCH] 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 https://github.com/remix-run/remix/discussions/6048 --- app/root.tsx | 12 ++++- package-lock.json | 130 ++++++++++++++++++++++++++++++++++++++++++++-- package.json | 1 + 3 files changed, 138 insertions(+), 5 deletions(-) diff --git a/app/root.tsx b/app/root.tsx index 208de2c2c..6d1135241 100644 --- 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(null) + useDelegatedAnchors(ref) + return ( @@ -223,7 +229,9 @@ function Document({ children }: { children?: React.ReactNode }) {
-
{children}
+
+ {children} +