Change useScrollRestoration to use pagehide event (#9945)

Co-authored-by: Sungjin Kim <[email protected]>

Author: brophdawg11

.changeset/small-squids-wash.md

@@ -0,0 +1,5 @@
+---
+"react-router-dom": patch
+---
+
+Use `pagehide` instead of `beforeunload` for `<ScrollRestoration>`. This has better cross-browser support, specifically on Mobile Safari.

contributors.yml

@@ -167,3 +167,4 @@
 - xavier-lc
 - xcsnowcity
 - yuleicul
+- jakkku

packages/react-router-dom/index.tsx

@@ -1143,8 +1143,8 @@ function useScrollRestoration({
     };
   }, []);
 
-  // Save positions on unload
-  useBeforeUnload(
+  // Save positions on pagehide
+  usePageHide(
     React.useCallback(() => {
       if (navigation.state === "idle") {
         let key = (getKey ? getKey(location, matches) : null) || location.key;
@@ -1241,6 +1241,28 @@ export function useBeforeUnload(
   }, [callback, capture]);
 }
 
+/**
+ * Setup a callback to be fired on the window's `pagehide` event. This is
+ * useful for saving some data to `window.localStorage` just before the page
+ * refreshes.  This event is better supported than beforeunload across browsers.
+ *
+ * Note: The `callback` argument should be a function created with
+ * `React.useCallback()`.
+ */
+function usePageHide(
+  callback: (event: PageTransitionEvent) => any,
+  options?: { capture?: boolean }
+): void {
+  let { capture } = options || {};
+  React.useEffect(() => {
+    let opts = capture != null ? { capture } : undefined;
+    window.addEventListener("pagehide", callback, opts);
+    return () => {
+      window.removeEventListener("pagehide", callback, opts);
+    };
+  }, [callback, capture]);
+}
+
 /**
  * Wrapper around useBlocker to show a window.confirm prompt to users instead
  * of building a custom UI with useBlocker.