use routeChangeComplete event for Next link

packages/app/src/components/Common/LinkEditorModeHashChange.tsx

@@ -1,19 +0,0 @@
-import { FC, useEffect } from 'react';
-
-import Link, { LinkProps } from 'next/link';
-
-import { isEditorModeHash } from '~/stores/ui';
-
-export const LinkEditorModeHashChange: FC<LinkProps> = (props: LinkProps) => {
-
-  const url = new URL(props.href.toString(), 'http://example.com');
-  const hash = url.hash;
-
-  useEffect(() => {
-    if (isEditorModeHash(hash) && window.location.hash !== hash) {
-      window.location.hash = hash;
-    }
-  }, [hash]);
-
-  return <Link {...props} />;
-};

packages/app/src/components/EventListeneres/HashChanged.tsx

@@ -1,5 +1,7 @@
 import React, { useCallback, useEffect } from 'react';
 
+import { useRouter } from 'next/router';
+
 import { useIsEditable } from '~/stores/context';
 import { useEditorMode, determineEditorModeByHash } from '~/stores/ui';
 
@@ -7,6 +9,7 @@ import { useEditorMode, determineEditorModeByHash } from '~/stores/ui';
  * Change editorMode by browser forward/back operation
  */
 const HashChanged = (): JSX.Element => {
+  const router = useRouter();
   const { data: isEditable } = useIsEditable();
   const { data: editorMode, mutate: mutateEditorMode } = useEditorMode();
 
@@ -31,7 +34,19 @@ const HashChanged = (): JSX.Element => {
       window.removeEventListener('hashchange', hashchangeHandler);
     };
 
-  }, [hashchangeHandler, isEditable, mutateEditorMode]);
+  }, [hashchangeHandler, isEditable]);
+
+  /*
+  * Route changes by Next Router
+  * https://nextjs.org/docs/api-reference/next/router
+  */
+  useEffect(() => {
+    router.events.on('routeChangeComplete', hashchangeHandler);
+
+    return () => {
+      router.events.off('routeChangeComplete', hashchangeHandler);
+    };
+  }, [hashchangeHandler, router.events]);
 
   return <></>;
 };

packages/app/src/components/PagePathHierarchicalLink.tsx

@@ -5,8 +5,6 @@ import urljoin from 'url-join';
 
 import LinkedPagePath from '../models/linked-page-path';
 
-import { LinkEditorModeHashChange } from './Common/LinkEditorModeHashChange';
-
 
 type PagePathHierarchicalLinkProps = {
   linkedPagePath: LinkedPagePath,
@@ -51,12 +49,12 @@ const PagePathHierarchicalLink = memo((props: PagePathHierarchicalLinkProps): JS
       : (
         <RootElm>
           <span className="path-segment">
-            <LinkEditorModeHashChange href="/" prefetch={false}>
+            <Link href="/" prefetch={false}>
               <a >
                 <i className="icon-home"></i>
                 <span className="separator">/</span>
               </a>
-            </LinkEditorModeHashChange>
+            </Link>
           </span>
         </RootElm>
       );