fix: scroll to top of page

src/components/App.tsx

@@ -2,9 +2,10 @@ import { CssBaseline, ThemeProvider } from "@mui/material"
 import { type ThemeProviderProps } from "@mui/material/styles/ThemeProvider"
 import { useCallback, type FC, type ReactNode } from "react"
 import { Provider, type ProviderProps } from "react-redux"
-import { BrowserRouter, Routes as RouterRoutes } from "react-router-dom"
+import { BrowserRouter } from "react-router-dom"
 import { type Action } from "redux"
 
+import { ScrollRoutes } from "./router"
 import { InactiveDialog, ScreenTimeDialog } from "../features"
 import { useCountdown, useEventListener, useLocation } from "../hooks"
 // import "../scripts"
@@ -42,7 +43,7 @@ const Routes: FC<
   return (
     <>
       {!headerExcludePaths.includes(pathname) && header}
-      <RouterRoutes>{routes}</RouterRoutes>
+      <ScrollRoutes>{routes}</ScrollRoutes>
       {!footerExcludePaths.includes(pathname) && footer}
     </>
   )

src/components/index.ts

@@ -14,8 +14,6 @@ export * from "./ItemizedList"
 export { default as ItemizedList } from "./ItemizedList"
 export * from "./OrderedGrid"
 export { default as OrderedGrid } from "./OrderedGrid"
-export * from "./ScrollRoutes"
-export { default as ScrollRoutes } from "./ScrollRoutes"
 export * from "./SyncError"
 export { default as SyncError } from "./SyncError"
 export * from "./TablePagination"

src/components/router/ScrollRoutes.tsx

@@ -0,0 +1,25 @@
+import { type FC, useEffect } from "react"
+import { Routes, type RoutesProps } from "react-router-dom"
+
+import { useLocation } from "../../hooks/router"
+
+export interface ScrollRoutesState {
+  scroll: { x: number; y: number }
+}
+
+export interface ScrollRoutesProps extends RoutesProps {}
+
+const ScrollRoutes: FC<ScrollRoutesProps> = props => {
+  const { pathname, state } = useLocation<ScrollRoutesState>()
+
+  let { scroll } = state || {}
+  scroll = scroll || { x: 0, y: 0 }
+
+  useEffect(() => {
+    window.scroll(scroll.x, scroll.y)
+  }, [pathname, scroll.x, scroll.y])
+
+  return <Routes {...props} />
+}
+
+export default ScrollRoutes

src/components/router/index.tsx

@@ -10,3 +10,5 @@ export * from "./LinkTab"
 export { default as LinkTab } from "./LinkTab"
 export * from "./Navigate"
 export { default as Navigate } from "./Navigate"
+export * from "./ScrollRoutes"
+export { default as ScrollRoutes } from "./ScrollRoutes"