fix(v2): do not focus on skip link if page refreshed (#4797)

* fix(v2): do not focus on skip link if page refreshed

* rename ref

Co-authored-by: slorber <lorber.sebastien@gmail.com>

packages/docusaurus-theme-classic/src/theme/SkipToContent/index.tsx

@@ -5,9 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useRef, useEffect} from 'react';
+import React, {useRef} from 'react';
 import Translate from '@docusaurus/Translate';
-import {useLocation} from '@docusaurus/router';
+import {useChangeRoute} from '@docusaurus/theme-common';
+
 import styles from './styles.module.css';
 
 function programmaticFocus(el: HTMLElement) {
@@ -18,8 +19,6 @@ function programmaticFocus(el: HTMLElement) {
 
 function SkipToContent(): JSX.Element {
   const containerRef = useRef<HTMLDivElement>(null);
-  const location = useLocation();
-
   const handleSkip = (e: React.MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault();
 
@@ -32,11 +31,11 @@ function SkipToContent(): JSX.Element {
     }
   };
 
-  useEffect(() => {
+  useChangeRoute(() => {
-    if (!location.hash && containerRef.current) {
+    if (containerRef.current) {
       programmaticFocus(containerRef.current);
     }
-  }, [location.pathname]);
+  });
 
   return (
     <div ref={containerRef}>

packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.ts

@@ -8,6 +8,7 @@
 import {useState, useCallback, useEffect, useRef} from 'react';
 import {useLocation} from '@docusaurus/router';
 import useScrollPosition from '@theme/hooks/useScrollPosition';
+import {useChangeRoute} from '@docusaurus/theme-common';
 import type {useHideableNavbarReturns} from '@theme/hooks/useHideableNavbar';
 
 const useHideableNavbar = (hideOnScroll: boolean): useHideableNavbarReturns => {
@@ -55,13 +56,13 @@ const useHideableNavbar = (hideOnScroll: boolean): useHideableNavbarReturns => {
     [navbarHeight, isFocusedAnchor],
   );
 
-  useEffect(() => {
+  useChangeRoute(() => {
     if (!hideOnScroll) {
       return;
     }
 
     setIsNavbarVisible(true);
-  }, [location.pathname]);
+  });
 
   useEffect(() => {
     if (!hideOnScroll) {

packages/docusaurus-theme-common/src/index.ts

@@ -33,6 +33,8 @@ export {useTitleFormatter} from './utils/generalUtils';
 
 export {usePluralForm} from './utils/usePluralForm';
 
+export {useChangeRoute} from './utils/useChangeRoute';
+
 export {
   useDocsPreferredVersion,
   useDocsPreferredVersionByPluginId,

packages/docusaurus-theme-common/src/utils/useChangeRoute.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {useRef, useEffect} from 'react';
+import {useLocation} from '@docusaurus/router';
+
+export function useChangeRoute(onRouteChange: () => void): void {
+  const {pathname} = useLocation();
+  const latestPathnameRef = useRef(pathname);
+
+  useEffect(() => {
+    if (pathname !== latestPathnameRef.current) {
+      latestPathnameRef.current = pathname;
+      onRouteChange();
+    }
+  }, [pathname, latestPathnameRef, onRouteChange]);
+}