feat: scroll to top when pathname is changing

Author: Ciensprog

package-lock.json

@@ -47,7 +47,7 @@
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@tanstack/react-router": "^1.29.2",
+    "@tanstack/react-router": "^1.46.4",
     "axios": "^1.6.8",
     "axios-retry": "^4.1.0",
     "chroma-js": "^2.4.2",

package.json

@@ -1,13 +1,40 @@
-import { createRootRoute, Outlet } from '@tanstack/react-router'
+import {
+  createRootRoute,
+  Outlet,
+  useLocation,
+} from '@tanstack/react-router'
+import { useEffect, useRef } from 'react'
 
 import { MainLayout } from '../layouts/main'
 
 export const Route = createRootRoute({
-  component: () => (
-    <>
-      <MainLayout>
-        <Outlet />
-      </MainLayout>
-    </>
-  ),
+  component: () => {
+    useScrollToTop()
+
+    return (
+      <>
+        <MainLayout>
+          <Outlet />
+        </MainLayout>
+      </>
+    )
+  },
 })
+
+function useScrollToTop() {
+  const $main = useRef<HTMLElement | null>(null)
+  const pathname = useLocation({
+    select: (location) => location.pathname,
+  })
+
+  useEffect(() => {
+    if (!$main.current) {
+      $main.current = document.querySelector('main')
+    }
+
+    $main.current?.scroll({
+      behavior: 'instant',
+      top: 0,
+    })
+  }, [pathname])
+}