remix-run · ryanflorence · Aug 30, 2022 · Aug 30, 2022 · Aug 30, 2022
diff --git a/.changeset/red-sheep-push.md b/.changeset/red-sheep-push.md
@@ -0,0 +1,7 @@
+---
+"react-router": patch
+"react-router-dom": patch
+"@remix-run/router": patch
+---
+
+fix: rename resetScroll -> preventScrollReset (#9199)
diff --git a/docs/components/link.md b/docs/components/link.md
@@ -56,12 +56,12 @@ A relative `<Link to>` value (that does not begin with `/`) resolves relative to
 
 [link-native]: ./link-native
 
-## `resetScroll`
+## `preventScrollReset`
 
 If you are using [`<ScrollRestoration>`][scrollrestoration], this lets you prevent the scroll position from being reset to the top of the window when the link is clicked.
 
 ```tsx
-<Link to="?tab=one" resetScroll={false} />
+<Link to="?tab=one" preventScrollReset={true} />
 ```
 
 This does not prevent the scroll position from being restored when the user comes back to the location with the back/forward buttons, it just prevents the reset when the user clicks the link.

diff --git a/docs/components/scroll-restoration.md b/docs/components/scroll-restoration.md
@@ -96,10 +96,10 @@ Or you may want to only use the pathname for some paths, and use the normal beha
 When navigation creates new scroll keys, the scroll position is reset to the top of the page. You can prevent the "scroll to top" behavior from your links:
 
 ```tsx
-<Link resetScroll={false} />
+<Link preventScrollReset={true} />
 ```
 
-See also: [`<Link resetScroll>`][resetscroll]
+See also: [`<Link preventScrollReset>`][preventscrollreset]
 
 ## Scroll Flashing
 
@@ -108,4 +108,4 @@ Without a server side rendering framework like [Remix][remix], you may experienc
 Server Rendering frameworks can prevent scroll flashing because they can send a fully formed document on the initial load, so scroll can be restored when the page first renders.
 
 [remix]: https://remix.run
-[resetscroll]: ../components/link#resetscroll
+[preventscrollreset]: ../components/link#preventscrollreset
diff --git a/docs/hooks/use-search-params-rn.md b/docs/hooks/use-search-params-rn.md
@@ -32,7 +32,7 @@ type SetURLSearchParams = (
 interface NavigateOptions {
   replace?: boolean;
   state?: any;
-  resetScroll?: boolean;
+  preventScrollReset?: boolean;
 }
 ```
 

diff --git a/docs/hooks/use-search-params.md b/docs/hooks/use-search-params.md
@@ -32,7 +32,7 @@ type SetURLSearchParams = (
 interface NavigateOptions {
   replace?: boolean;
   state?: any;
-  resetScroll?: boolean;
+  preventScrollReset?: boolean;
 }
 ```
 

diff --git a/examples/scroll-restoration/src/routes.tsx b/examples/scroll-restoration/src/routes.tsx
@@ -94,7 +94,7 @@ export function Layout() {
                   </Link>
                 </li>
                 <li className="navitem">
-                  <Link to="/restore-by-key" resetScroll={false}>
+                  <Link to="/restore-by-key" preventScrollReset>
                     This link will not scroll to the top
                   </Link>
                 </li>

diff --git a/packages/react-router-dom/__tests__/data-browser-router-test.tsx b/packages/react-router-dom/__tests__/data-browser-router-test.tsx
@@ -537,7 +537,7 @@ function testDomRouter(
       `);
     });
 
-    it("handles link navigations with resetScroll=false", async () => {
+    it("handles link navigations with preventScrollReset", async () => {
       let { container } = render(
         <TestDataRouter window={getWindow("/foo")} hydrationData={{}}>
           <Route path="/" element={<Layout />}>
@@ -551,37 +551,84 @@ function testDomRouter(
         let state = React.useContext(DataRouterStateContext);
         return (
           <div>
-            <Link to="/foo" resetScroll={false}>
+            <Link to="/foo" preventScrollReset>
               Link to Foo
             </Link>
             <Link to="/bar">Link to Bar</Link>
-            <p id="resetScrollPosition">{String(state.resetScrollPosition)}</p>
+            <p id="preventScrollReset">{String(state?.preventScrollReset)}</p>
             <Outlet />
           </div>
         );
       }
 
       fireEvent.click(screen.getByText("Link to Bar"));
       await waitFor(() => screen.getByText("Bar Heading"));
-      expect(getHtml(container.querySelector("#resetScrollPosition")))
+      expect(getHtml(container.querySelector("#preventScrollReset")))
         .toMatchInlineSnapshot(`
         "<p
-          id=\\"resetScrollPosition\\"
+          id=\\"preventScrollReset\\"
         >
-          true
+          false
         </p>"
       `);
 
       fireEvent.click(screen.getByText("Link to Foo"));
       await waitFor(() => screen.getByText("Foo Heading"));
-      expect(getHtml(container.querySelector("#resetScrollPosition")))
+      expect(getHtml(container.querySelector("#preventScrollReset")))
+        .toMatchInlineSnapshot(`
+        "<p
+          id=\\"preventScrollReset\\"
+        >
+          true
+        </p>"
+      `);
+    });
+
+    it("handles link navigations with preventScrollReset={true}", async () => {
+      let { container } = render(
+        <TestDataRouter window={getWindow("/foo")} hydrationData={{}}>
+          <Route path="/" element={<Layout />}>
+            <Route path="foo" element={<h1>Foo Heading</h1>} />
+            <Route path="bar" element={<h1>Bar Heading</h1>} />
+          </Route>
+        </TestDataRouter>
+      );
+
+      function Layout() {
+        let state = React.useContext(DataRouterStateContext);
+        return (
+          <div>
+            <Link to="/foo" preventScrollReset={true}>
+              Link to Foo
+            </Link>
+            <Link to="/bar">Link to Bar</Link>
+            <p id="preventScrollReset">{String(state?.preventScrollReset)}</p>
+            <Outlet />
+          </div>
+        );
+      }
+
+      fireEvent.click(screen.getByText("Link to Bar"));
+      await waitFor(() => screen.getByText("Bar Heading"));
+      expect(getHtml(container.querySelector("#preventScrollReset")))
         .toMatchInlineSnapshot(`
         "<p
-          id=\\"resetScrollPosition\\"
+          id=\\"preventScrollReset\\"
         >
           false
         </p>"
       `);
+
+      fireEvent.click(screen.getByText("Link to Foo"));
+      await waitFor(() => screen.getByText("Foo Heading"));
+      expect(getHtml(container.querySelector("#preventScrollReset")))
+        .toMatchInlineSnapshot(`
+        "<p
+          id=\\"preventScrollReset\\"
+        >
+          true
+        </p>"
+      `);
     });
 
     it("executes route actions/loaders on useSubmit navigations", async () => {

diff --git a/packages/react-router-dom/index.tsx b/packages/react-router-dom/index.tsx
@@ -395,7 +395,7 @@ export interface LinkProps
   reloadDocument?: boolean;
   replace?: boolean;
   state?: any;
-  resetScroll?: boolean;
+  preventScrollReset?: boolean;
   relative?: RelativeRoutingType;
   to: To;
 }
@@ -413,7 +413,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
       state,
       target,
       to,
-      resetScroll,
+      preventScrollReset,
       ...rest
     },
     ref
@@ -423,7 +423,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
       replace,
       state,
       target,
-      resetScroll,
+      preventScrollReset,
       relative,
     });
     function handleClick(
@@ -706,13 +706,13 @@ export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
     target,
     replace: replaceProp,
     state,
-    resetScroll,
+    preventScrollReset,
     relative,
   }: {
     target?: React.HTMLAttributeAnchorTarget;
     replace?: boolean;
     state?: any;
-    resetScroll?: boolean;
+    preventScrollReset?: boolean;
     relative?: RelativeRoutingType;
   } = {}
 ): (event: React.MouseEvent<E, MouseEvent>) => void {
@@ -732,7 +732,7 @@ export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
             ? replaceProp
             : createPath(location) === createPath(path);
 
-        navigate(to, { replace, state, resetScroll, relative });
+        navigate(to, { replace, state, preventScrollReset, relative });
       }
     },
     [
@@ -743,7 +743,7 @@ export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
       state,
       target,
       to,
-      resetScroll,
+      preventScrollReset,
       relative,
     ]
   );
@@ -1053,7 +1053,7 @@ function useScrollRestoration({
     router != null && state != null,
     "useScrollRestoration must be used within a DataRouterStateContext"
   );
-  let { restoreScrollPosition, resetScrollPosition } = state;
+  let { restoreScrollPosition, preventScrollReset } = state;
 
   // Trigger manual scroll restoration while we're active
   React.useEffect(() => {
@@ -1125,13 +1125,13 @@ function useScrollRestoration({
     }
 
     // Opt out of scroll reset if this link requested it
-    if (resetScrollPosition === false) {
+    if (preventScrollReset === true) {
       return;
     }
 
     // otherwise go to the top on new locations
     window.scrollTo(0, 0);
-  }, [location, restoreScrollPosition, resetScrollPosition]);
+  }, [location, restoreScrollPosition, preventScrollReset]);
 }
 
 function useBeforeUnload(callback: () => any): void {

diff --git a/packages/react-router-dom/server.tsx b/packages/react-router-dom/server.tsx
@@ -192,7 +192,7 @@ function getStatelessRemixRouter(
         initialized: true,
         navigation: IDLE_NAVIGATION,
         restoreScrollPosition: null,
-        resetScrollPosition: true,
+        preventScrollReset: false,
         revalidation: "idle" as RevalidationState,
         fetchers: new Map(),
       };

diff --git a/packages/react-router/lib/components.tsx b/packages/react-router/lib/components.tsx
@@ -88,12 +88,15 @@ export function DataRouterProvider({
       createHref: router.createHref,
       go: (n) => router.navigate(n),
       push: (to, state, opts) =>
-        router.navigate(to, { state, resetScroll: opts?.resetScroll }),
+        router.navigate(to, {
+          state,
+          preventScrollReset: opts?.preventScrollReset,
+        }),
       replace: (to, state, opts) =>
         router.navigate(to, {
           replace: true,
           state,
-          resetScroll: opts?.resetScroll,
+          preventScrollReset: opts?.preventScrollReset,
         }),
     };
   }, [router]);

diff --git a/packages/react-router/lib/context.ts b/packages/react-router/lib/context.ts
@@ -65,7 +65,7 @@ export type RelativeRoutingType = "route" | "path";
 export interface NavigateOptions {
   replace?: boolean;
   state?: any;
-  resetScroll?: boolean;
+  preventScrollReset?: boolean;
   relative?: RelativeRoutingType;
 }
 

diff --git a/packages/router/README.md b/packages/router/README.md
@@ -45,8 +45,8 @@ interface RouterState {
   // should not restore,m or null if we don't have a saved position
   // Note: must be enabled via router.enableScrollRestoration()
   restoreScrollPosition: number | false | null;
-  // Proxied `resetScroll` value passed to router.navigate() (default true)
-  resetScrollPosition: boolean;
+  // Proxied `preventScrollReset` value passed to router.navigate() (default false)
+  preventScrollReset: boolean;
   // Data from the loaders for the current matches
   loaderData: RouteData;
   // Data from the action for the current matches