Strip basename from location provided to getKey

.changeset/strip-basename-getkey.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/router": patch
+---
+
+Fix `basename` not being stripped from the location provided to `<ScrollRestoration getKey>`

packages/router/__tests__/router-test.ts

@@ -6959,6 +6959,37 @@ describe("a router", () => {
         expect(t.router.state.preventScrollReset).toBe(false);
       });
 
+      it("strips the basename from the location provided to getKey", async () => {
+        let t = setup({
+          routes: SCROLL_ROUTES,
+          basename: "/base",
+          initialEntries: ["/base"],
+          hydrationData: {
+            loaderData: {
+              index: "INDEX_DATA",
+            },
+          },
+        });
+
+        let positions = { "/tasks": 100 };
+        let activeScrollPosition = 0;
+        let pathname;
+        t.router.enableScrollRestoration(
+          positions,
+          () => activeScrollPosition,
+          (l) => {
+            pathname = l.pathname;
+            return l.pathname;
+          }
+        );
+
+        let nav1 = await t.navigate("/base/tasks");
+        await nav1.loaders.tasks.resolve("TASKS");
+        expect(pathname).toBe("/tasks");
+        expect(t.router.state.restoreScrollPosition).toBe(100);
+        expect(t.router.state.preventScrollReset).toBe(false);
+      });
+
       it("restores scroll on GET submissions", async () => {
         let t = setup({
           routes: SCROLL_ROUTES,

packages/router/router.ts

@@ -2430,7 +2430,7 @@ export function createRouter(init: RouterInit): Router {
   ) {
     savedScrollPositions = positions;
     getScrollPosition = getPosition;
-    getScrollRestorationKey = getKey || ((location) => location.key);
+    getScrollRestorationKey = getKey || null;
 
     // Perform initial hydration scroll restoration, since we miss the boat on
     // the initial updateState() because we've not yet rendered <ScrollRestoration/>
@@ -2450,15 +2450,27 @@ export function createRouter(init: RouterInit): Router {
     };
   }
 
+  function getScrollKey(location: Location, matches: AgnosticDataRouteMatch[]) {
+    if (getScrollRestorationKey) {
+      let loc = {
+        ...location,
+        pathname:
+          stripBasename(location.pathname, basename) || location.pathname,
+      };
+      let userMatches = matches.map((m) =>
+        createUseMatchesMatch(m, state.loaderData)
+      );
+      return getScrollRestorationKey(loc, userMatches) || location.key;
+    }
+    return location.key;
+  }
+
   function saveScrollPosition(
     location: Location,
     matches: AgnosticDataRouteMatch[]
   ): void {
-    if (savedScrollPositions && getScrollRestorationKey && getScrollPosition) {
-      let userMatches = matches.map((m) =>
-        createUseMatchesMatch(m, state.loaderData)
-      );
-      let key = getScrollRestorationKey(location, userMatches) || location.key;
+    if (savedScrollPositions && getScrollPosition) {
+      let key = getScrollKey(location, matches);
       savedScrollPositions[key] = getScrollPosition();
     }
   }
@@ -2467,11 +2479,8 @@ export function createRouter(init: RouterInit): Router {
     location: Location,
     matches: AgnosticDataRouteMatch[]
   ): number | null {
-    if (savedScrollPositions && getScrollRestorationKey && getScrollPosition) {
-      let userMatches = matches.map((m) =>
-        createUseMatchesMatch(m, state.loaderData)
-      );
-      let key = getScrollRestorationKey(location, userMatches) || location.key;
+    if (savedScrollPositions) {
+      let key = getScrollKey(location, matches);
       let y = savedScrollPositions[key];
       if (typeof y === "number") {
         return y;