Migrate to unstable_useRouterState hook (#244)

* Migrate to unstable_useRouterState hook

Replaces useLocation/useParams/useNavigation calls with the consolidated
unstable_useRouterState hook from remix-run/react-router#15038. useMatches
calls that read loaderData are left in place since the new hook's matches
omit data fields.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* Update React Router to 7.15.1

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* Rename useNavigation hook to useNavState

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: 3 people

app/actions/color-scheme/components.tsx

@@ -1,5 +1,8 @@
 import { useLayoutEffect, useMemo } from "react";
-import { useNavigation, unstable_useRoute as useRoute } from "react-router";
+import {
+  unstable_useRoute as useRoute,
+  unstable_useRouterState as useRouterState,
+} from "react-router";
 import type { ColorScheme } from "./server";
 
 export function getColorScheme(formData: FormData): ColorScheme | null {
@@ -20,7 +23,7 @@ export function useColorScheme(): ColorScheme {
   let rootRoute = useRoute("root");
   let colorScheme = rootRoute.loaderData?.colorScheme ?? "system";
 
-  let { formData } = useNavigation();
+  let formData = useRouterState().pending?.formData;
   let optimisticColorScheme = formData ? getColorScheme(formData) : null;
   return optimisticColorScheme || colorScheme;
 }

app/components/color-scheme-toggle.tsx

@@ -1,13 +1,13 @@
 import { clsx } from "clsx";
 import * as React from "react";
-import { Form, useLocation } from "react-router";
+import { Form, unstable_useRouterState as useRouterState } from "react-router";
 import { useColorScheme } from "~/actions/color-scheme/components";
 import iconsHref from "~/icons.svg";
 import { DetailsMenu } from "~/modules/details-menu";
 import { DetailsPopup } from "./details-popup";
 
 export function ColorSchemeToggle() {
-  let location = useLocation();
+  let { location } = useRouterState().active;
 
   // This is the same default, hover, focus style as the VersionSelect
   const className =

app/components/doc-error-boundary.tsx

@@ -1,8 +1,12 @@
-import { isRouteErrorResponse, useParams, useRouteError } from "react-router";
+import {
+  isRouteErrorResponse,
+  unstable_useRouterState as useRouterState,
+  useRouteError,
+} from "react-router";
 
 export function ErrorBoundary() {
   let error = useRouteError();
-  let params = useParams();
+  let { params } = useRouterState().active;
 
   if (isRouteErrorResponse(error)) {
     return (

app/components/docs-menu/menu.tsx

@@ -5,7 +5,7 @@ import { clsx } from "clsx";
 import iconsHref from "~/icons.svg";
 
 import type { MenuDoc } from "~/modules/gh-docs/.server/docs";
-import { useNavigation } from "~/hooks/use-navigation";
+import { useNavState } from "~/hooks/use-nav-state";
 import { useDelayedValue } from "~/hooks/use-delayed-value";
 import { useHeaderData } from "../docs-header/use-header-data";
 
@@ -179,7 +179,7 @@ function LinkWithSpinner({
   children: React.ReactNode;
   className: (isActive: boolean) => string;
 }) {
-  let { isActive, isPending } = useNavigation(to);
+  let { isActive, isPending } = useNavState(to);
   let slowNav = useDelayedValue(isPending);
 
   return (

app/components/version-select.tsx

@@ -2,15 +2,15 @@ import iconsHref from "~/icons.svg";
 import { DetailsMenu } from "~/modules/details-menu";
 import { DetailsPopup } from "./details-popup";
 import { PopupLabel } from "./popup-label";
-import { Link, useParams } from "react-router";
+import { Link, unstable_useRouterState as useRouterState } from "react-router";
 import { clsx } from "clsx";
 import { useHeaderData } from "./docs-header/use-header-data";
-import { useNavigation } from "~/hooks/use-navigation";
+import { useNavState } from "~/hooks/use-nav-state";
 
 export function VersionSelect() {
   let { versions, latestVersion, releaseBranch, branches, currentGitHubRef } =
     useHeaderData();
-  let { "*": splat } = useParams();
+  let { "*": splat } = useRouterState().active.params;
 
   let slug = "";
   if (splat && !currentGitHubRef.startsWith("6")) {
@@ -88,7 +88,7 @@ function VersionLink({ version }: { version: string }) {
 
 function RefLink({ to, children }: { to: string; children: React.ReactNode }) {
   let isExternal = to.startsWith("http");
-  let { isActive } = useNavigation(to);
+  let { isActive } = useNavState(to);
   let className =
     "relative pl-4 group items-center flex py-1 before:mr-4 before:relative before:top-px before:block before:h-1.5 before:w-1.5 before:rounded-full before:content-['']";
 

app/hooks/use-nav-state.ts

@@ -0,0 +1,14 @@
+import {
+  unstable_useRouterState as useRouterState,
+  useResolvedPath,
+} from "react-router";
+
+export function useNavState(to: string) {
+  let { active, pending } = useRouterState();
+  let resolved = useResolvedPath(to || "/");
+
+  return {
+    isActive: active.location.pathname === resolved.pathname,
+    isPending: pending?.location.pathname === resolved.pathname,
+  };
+}

app/hooks/use-navigation.ts

@@ -1,4 +1,4 @@
-import { useLocation, useNavigation } from "react-router";
+import { unstable_useRouterState as useRouterState } from "react-router";
 import * as React from "react";
 
 /**
@@ -11,20 +11,19 @@ export let DetailsMenu = React.forwardRef<
 >(({ ...props }, forwardedRef) => {
   let { onToggle, onMouseDown, onTouchStart, onFocus, open, ...rest } = props;
   let [isOpen, setIsOpen] = React.useState(false);
-  let location = useLocation();
-  let navigation = useNavigation();
+  let { active, pending } = useRouterState();
   let clickRef = React.useRef<boolean>(false);
   let focusRef = React.useRef<boolean>(false);
 
   React.useEffect(() => {
-    if (navigation.formData) {
+    if (pending?.formData) {
       setIsOpen(false);
     }
-  }, [navigation]);
+  }, [pending]);
 
   React.useEffect(() => {
     setIsOpen(false);
-  }, [location.key]);
+  }, [active.location.key]);
 
   React.useEffect(() => {
     if (isOpen) {

app/modules/details-menu/index.tsx

@@ -17,7 +17,7 @@
   "dependencies": {
     "@docsearch/css": "^3.9.0",
     "@docsearch/react": "^3.9.0",
-    "@react-router/node": "7.15.0",
+    "@react-router/node": "7.15.1",
     "@remix-run/compression-middleware": "^0.1.4",
     "@remix-run/fetch-router": "^0.18.0",
     "@remix-run/logger-middleware": "^0.1.4",
@@ -40,7 +40,7 @@
     "parse-numeric-range": "^1.3.0",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
-    "react-router": "7.15.0",
+    "react-router": "7.15.1",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "rehype-stringify": "^10.0.1",
@@ -55,7 +55,7 @@
     "unist-util-visit": "^5.1.0"
   },
   "devDependencies": {
-    "@react-router/dev": "7.15.0",
+    "@react-router/dev": "7.15.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@types/hast": "^3.0.4",
     "@types/lodash.merge": "^4.6.9",