docs: scrollRestoration default and replace deprecated <ScrollRestoration>

schiller-manuel · schiller-manuel · commit 4f54803e89bd · 2025-01-30T19:44:16.000+01:00
diff --git a/docs/router/framework/react/guide/tanstack-start.md b/docs/router/framework/react/guide/tanstack-start.md
@@ -183,7 +183,7 @@ import { hydrateRoot } from 'react-dom/client'
 import { StartClient } from '@tanstack/start'
 import { createRouter } from './router'
 
-const router = createRouter()
+const router = createRouter({ scrollRestoration: true })
 
 hydrateRoot(document!, <StartClient router={router} />)
 ```
@@ -197,7 +197,7 @@ Finally, we need to create the root of our application. This is the entry point
 ```tsx
 // app/routes/__root.tsx
 import { createRootRoute } from '@tanstack/react-router'
-import { Outlet, ScrollRestoration } from '@tanstack/react-router'
+import { Outlet } from '@tanstack/react-router'
 import { Meta, Scripts } from '@tanstack/start'
 import * as React from 'react'
 
@@ -233,7 +233,6 @@ function RootDocument({ children }: { children: React.ReactNode }) {
       </head>
       <body>
         {children}
-        <ScrollRestoration />
         <Scripts />
       </body>
     </html>
diff --git a/docs/start/framework/react/build-from-scratch.md b/docs/start/framework/react/build-from-scratch.md
@@ -190,7 +190,7 @@ import { hydrateRoot } from 'react-dom/client'
 import { StartClient } from '@tanstack/start'
 import { createRouter } from './router'
 
-const router = createRouter()
+const router = createRouter({ scrollRestoration: true })
 
 hydrateRoot(document, <StartClient router={router} />)
 ```
@@ -203,11 +203,7 @@ Finally, we need to create the root of our application. This is the entry point
 
 ```tsx
 // app/routes/__root.tsx
-import {
-  Outlet,
-  ScrollRestoration,
-  createRootRoute,
-} from '@tanstack/react-router'
+import { Outlet, createRootRoute } from '@tanstack/react-router'
 import { Meta, Scripts } from '@tanstack/start'
 import type { ReactNode } from 'react'
 
@@ -245,7 +241,6 @@ function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
       </head>
       <body>
         {children}
-        <ScrollRestoration />
         <Scripts />
       </body>
     </html>
diff --git a/docs/start/framework/react/learn-the-basics.md b/docs/start/framework/react/learn-the-basics.md
@@ -28,6 +28,7 @@ import { routeTree } from './routeTree.gen'
 export function createRouter() {
   const router = createTanStackRouter({
     routeTree,
+    scrollRestoration: true,
   })
 
   return router
@@ -40,6 +41,8 @@ declare module '@tanstack/react-router' {
 }
 ```
 
+- Notice the `scrollRestoration` property. This is used to restore the scroll position of the page when navigating between routes.
+
 ## Route Generation
 
 The `routeTree.gen.ts` file is generated when you run TanStack Start (via `npm run dev` or `npm run start`) for the first time. This file contains the generated route tree and a handful of TS utilities that make TanStack Start fully type-safe.
@@ -97,11 +100,7 @@ Because it is **always rendered**, it is the perfect place to construct your app
 
 ```tsx
 // app/routes/__root.tsx
-import {
-  Outlet,
-  ScrollRestoration,
-  createRootRoute,
-} from '@tanstack/react-router'
+import { Outlet, createRootRoute } from '@tanstack/react-router'
 import { Meta, Scripts } from '@tanstack/start'
 import type { ReactNode } from 'react'
 
@@ -139,7 +138,6 @@ function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
       </head>
       <body>
         {children}
-        <ScrollRestoration />
         <Scripts />
       </body>
     </html>
@@ -148,7 +146,6 @@ function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
 ```
 
 - This layout may change in the future as we roll out SPA mode, which allows the root route to render the SPA shell without any page-specific content.
-- Notice the `ScrollRestoration` component. This is used to restore the scroll position of the page when navigating between routes.
 - Notice the `Scripts` component. This is used to load all of the client-side JavaScript for the application.
 
 ## Routes
diff --git a/packages/react-router/src/router.ts b/packages/react-router/src/router.ts
@@ -459,9 +459,9 @@ export interface RouterOptions<
   defaultRemountDeps?: (opts: MakeRemountDepsOptionsUnion<TRouteTree>) => any
 
   /**
-   * If `false`, scroll restoration will be disabled
+   * If `true`, scroll restoration will be enabled
    *
-   * @default true
+   * @default false
    */
   scrollRestoration?: boolean
   getScrollRestorationKey?: (location: ParsedLocation) => string
