fix: pass useMatches objects to ScrollRestoration getKey (#9157)

* docs: minor typing updates to align with docs

* fix up types for scroll restoration matches

* add changeset

* add comments about DRY

.changeset/beige-buckets-lick.md

@@ -0,0 +1,6 @@
+---
+"react-router-dom": patch
+"@remix-run/router": patch
+---
+
+fix: pass useMatches objects to ScrollRestoration getKey (#9157)

examples/scroll-restoration/src/routes.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 
 import {
-  type DataRouteMatch,
   type Location,
   Link,
   Outlet,
   ScrollRestoration,
   useLoaderData,
   useLocation,
   useNavigation,
+  useMatches,
 } from "react-router-dom";
 
 export function Layout() {
@@ -22,9 +22,9 @@ export function Layout() {
   // previously-accessed path.  Or - go nuts and lump many pages into a
   // single key (i.e., anything /wizard/* uses the same key)!
   let getKey = React.useCallback(
-    (location: Location, matches: DataRouteMatch[]) => {
-      let match = matches.find((m) => m.route.handle?.scrollMode);
-      if (match?.route.handle?.scrollMode === "pathname") {
+    (location: Location, matches: ReturnType<typeof useMatches>) => {
+      let match = matches.find((m) => (m.handle as any)?.scrollMode);
+      if ((match?.handle as any)?.scrollMode === "pathname") {
         return location.pathname;
       }
 

packages/react-router-dom/index.tsx

@@ -8,6 +8,8 @@ import {
   NavigateOptions,
   RouteObject,
   To,
+  useMatches,
+  useNavigation,
 } from "react-router";
 import {
   Router,
@@ -1017,6 +1019,8 @@ function useScrollRestoration({
   storageKey?: string;
 } = {}) {
   let location = useLocation();
+  let matches = useMatches();
+  let navigation = useNavigation();
   let dataRouterContext = React.useContext(DataRouterContext);
   invariant(
     dataRouterContext,
@@ -1042,24 +1046,16 @@ function useScrollRestoration({
   // Save positions on unload
   useBeforeUnload(
     React.useCallback(() => {
-      if (state?.navigation.state === "idle") {
-        let key =
-          (getKey ? getKey(state.location, state.matches) : null) ||
-          state.location.key;
+      if (navigation.state === "idle") {
+        let key = (getKey ? getKey(location, matches) : null) || location.key;
         savedScrollPositions[key] = window.scrollY;
       }
       sessionStorage.setItem(
         storageKey || SCROLL_RESTORATION_STORAGE_KEY,
         JSON.stringify(savedScrollPositions)
       );
       window.history.scrollRestoration = "auto";
-    }, [
-      storageKey,
-      getKey,
-      state.navigation.state,
-      state.location,
-      state.matches,
-    ])
+    }, [storageKey, getKey, navigation.state, location, matches])
   );
 
   // Read in any saved scroll locations

packages/react-router/lib/context.ts

@@ -15,8 +15,8 @@ import { Action as NavigationType } from "@remix-run/router";
 // export from react-router
 export interface RouteObject extends AgnosticRouteObject {
   children?: RouteObject[];
-  element?: React.ReactNode;
-  errorElement?: React.ReactNode;
+  element?: React.ReactNode | null;
+  errorElement?: React.ReactNode | null;
 }
 
 export interface DataRouteObject extends RouteObject {

packages/react-router/lib/hooks.tsx

@@ -673,6 +673,9 @@ export function useMatches() {
     () =>
       matches.map((match) => {
         let { pathname, params } = match;
+        // Note: This structure matches that created by createUseMatchesMatch
+        // in the @remix-run/router , so if you change this please also change
+        // that :)  Eventually we'll DRY this up
         return {
           id: match.route.id,
           pathname,

packages/router/router.ts

@@ -14,6 +14,7 @@ import {
   AgnosticRouteObject,
   Submission,
   SuccessResult,
+  AgnosticRouteMatch,
 } from "./utils";
 import {
   DeferredData,
@@ -258,12 +259,20 @@ export interface RouterSubscriber {
   (state: RouterState): void;
 }
 
+interface UseMatchesMatch {
+  id: string;
+  pathname: string;
+  params: AgnosticRouteMatch["params"];
+  data: unknown;
+  handle: unknown;
+}
+
 /**
  * Function signature for determining the key to be used in scroll restoration
  * for a given location
  */
 export interface GetScrollRestorationKeyFunction {
-  (location: Location, matches: AgnosticDataRouteMatch[]): string | null;
+  (location: Location, matches: UseMatchesMatch[]): string | null;
 }
 
 /**
@@ -1626,7 +1635,10 @@ export function createRouter(init: RouterInit): Router {
     matches: AgnosticDataRouteMatch[]
   ): void {
     if (savedScrollPositions && getScrollRestorationKey && getScrollPosition) {
-      let key = getScrollRestorationKey(location, matches) || location.key;
+      let userMatches = matches.map((m) =>
+        createUseMatchesMatch(m, state.loaderData)
+      );
+      let key = getScrollRestorationKey(location, userMatches) || location.key;
       savedScrollPositions[key] = getScrollPosition();
     }
   }
@@ -1636,7 +1648,10 @@ export function createRouter(init: RouterInit): Router {
     matches: AgnosticDataRouteMatch[]
   ): number | null {
     if (savedScrollPositions && getScrollRestorationKey && getScrollPosition) {
-      let key = getScrollRestorationKey(location, matches) || location.key;
+      let userMatches = matches.map((m) =>
+        createUseMatchesMatch(m, state.loaderData)
+      );
+      let key = getScrollRestorationKey(location, userMatches) || location.key;
       let y = savedScrollPositions[key];
       if (typeof y === "number") {
         return y;
@@ -2674,6 +2689,22 @@ function hasNakedIndexQuery(search: string): boolean {
   return new URLSearchParams(search).getAll("index").some((v) => v === "");
 }
 
+// Note: This should match the format exported by useMatches, so if you change
+// this please also change that :)  Eventually we'll DRY this up
+function createUseMatchesMatch(
+  match: AgnosticDataRouteMatch,
+  loaderData: RouteData
+): UseMatchesMatch {
+  let { route, pathname, params } = match;
+  return {
+    id: route.id,
+    pathname,
+    params,
+    data: loaderData[route.id] as unknown,
+    handle: route.handle as unknown,
+  };
+}
+
 function getTargetMatch(
   matches: AgnosticDataRouteMatch[],
   location: Location | string