fix(navigation): don't scroll to hash on replace navigation within page

When we do a client side page navigation via wouter, if there is a hash
anchor in the url, we scroll to that anchor to match the default browser
behavior.

This means that if we want to update the URL to match the user's current
scroll location in the document, we end up triggering a second scroll.

To avoid this, do not scroll to the anchor if the following conditions
are met:

- The navigation is happening on the same page:
   (i.e. from some/url#foo to some/url#bar)
- The navigation was triggered by a history.replaceState() action

Author: danroberts

packages/fastify-renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fastify-renderer",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Simple, high performance client side app renderer for Fastify.",
   "exports": {
     ".": {

packages/fastify-renderer/src/client/react/Root.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
-import { Route, Router, Switch, useLocation } from 'wouter'
+import { Route, Router, Switch, useLocation, useRouter } from 'wouter'
 import { usePromise } from './fetcher'
-import { useNavigationDetails, useTransitionLocation } from './locationHook'
+import { shouldScrollToHash, useNavigationDetails, useTransitionLocation } from './locationHook'
 import { matcher } from './matcher'
 
 export interface LayoutProps {
@@ -47,6 +47,7 @@ export function Root<BootProps>(props: {
       <Route path={route} key={route}>
         {(params) => {
           const [location] = useLocation()
+          const router = useRouter()
           const backendPath = location.split('#')[0] // remove current anchor for fetching data from the server side
 
           const payload = usePromise<{ props: Record<string, any> }>(props.basePath + backendPath, async () => {
@@ -65,9 +66,11 @@ export function Root<BootProps>(props: {
             }
           })
 
-          // navigate to the anchor in the url after rendering
+          // Navigate to the anchor in the url after rendering, unless we're using replaceState and
+          // the destination page and previous page have the same base route (i.e. before '#')
+          // We would do this for example to update the url to the correct anchor as the user scrolls.
           useEffect(() => {
-            if (window.location.hash) {
+            if (window.location.hash && shouldScrollToHash(router.navigationHistory)) {
               document.getElementById(window.location.hash.slice(1))?.scrollIntoView()
             }
           }, [location])

packages/fastify-renderer/src/client/react/locationHook.ts

@@ -1,5 +1,5 @@
 import { unstable_useTransition as useTransition, useCallback, useEffect, useRef, useState } from 'react'
-import { useLocation } from 'wouter'
+import { NavigationHistory, useLocation, useRouter } from 'wouter'
 
 /**
  * History API docs @see https://developer.mozilla.org/en-US/docs/Web/API/History
@@ -20,6 +20,7 @@ export const useTransitionLocation = ({ base = '' } = {}) => {
   const [path, update] = useState(() => currentPathname(base)) // @see https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
   const prevLocation = useRef(path + location.search + location.hash)
   const [startTransition, isPending] = useTransition()
+  const router = useRouter()
 
   useEffect(() => {
     // this function checks if the location has been changed since the
@@ -31,9 +32,13 @@ export const useTransitionLocation = ({ base = '' } = {}) => {
 
       if (prevLocation.current !== destination) {
         prevLocation.current = destination
-        startTransition(() => {
+        if (shouldScrollToHash(router.navigationHistory)) {
+          startTransition(() => {
+            update(destination)
+          })
+        } else {
           update(destination)
-        })
+        }
       }
     }
 
@@ -61,11 +66,23 @@ export const useTransitionLocation = ({ base = '' } = {}) => {
         return
       }
 
+      const path = base + to
+
+      if (!router.navigationHistory) router.navigationHistory = {}
+      if (router.navigationHistory?.current) {
+        router.navigationHistory.previous = { ...router.navigationHistory.current }
+      }
+
+      router.navigationHistory.current = {
+        path,
+        replace,
+      }
+
       history[replace ? eventReplaceState : eventPushState](
         null,
         '',
         // handle nested routers and absolute paths
-        base + to
+        path
       )
     },
     [base]
@@ -105,3 +122,16 @@ export const useNavigationDetails = (): [boolean, string] => {
 
 const currentPathname = (base, path = location.pathname + location.search + location.hash) =>
   !path.toLowerCase().indexOf(base.toLowerCase()) ? path.slice(base.length) || '/' : '~' + path
+
+export const navigatingOnSamePage = (history?: NavigationHistory): boolean => {
+  const { current, previous } = history || {}
+
+  if (!history) return false
+  if (!current || !previous) return false
+
+  return current.path.split('#')[0] == previous.path.split('#')[0]
+}
+
+export const shouldScrollToHash = (history?: NavigationHistory): boolean => {
+  return !(navigatingOnSamePage(history) && history?.current?.replace)
+}

packages/fastify-renderer/src/client/react/wouter-extension.d.ts

@@ -0,0 +1,17 @@
+import 'wouter'
+
+declare module 'wouter' {
+  export interface RouterProps {
+    navigationHistory?: NavigationHistory
+  }
+
+  export interface NavigationHistory {
+    current?: NavigationHistoryItem
+    previous?: NavigationHistoryItem
+  }
+
+  export interface NavigationHistoryItem {
+    path: string
+    replace: boolean
+  }
+}