Просмотр исходного кода

not to use next/link for anchor links

Yuki Takei 3 лет назад
Родитель
Сommit
2312fc2891

+ 14 - 1
packages/app/src/components/ReactMarkdownComponents/Header.tsx

@@ -85,7 +85,7 @@ export const Header = (props: HeaderProps): JSX.Element => {
     activateByHash(window.location.href);
   }, [activateByHash]);
 
-  // update isActive when hash is changed
+  // update isActive when hash is changed by next router
   useEffect(() => {
     router.events.on('hashChangeComplete', activateByHash);
 
@@ -94,6 +94,19 @@ export const Header = (props: HeaderProps): JSX.Element => {
     };
   }, [activateByHash, router.events]);
 
+  // update isActive when hash is changed
+  useEffect(() => {
+    const activeByHashWrapper = (e: HashChangeEvent) => {
+      activateByHash(e.newURL);
+    };
+
+    window.addEventListener('hashchange', activeByHashWrapper);
+
+    return () => {
+      window.removeEventListener('hashchange', activeByHashWrapper);
+    };
+  }, [activateByHash, router.events]);
+
   const showEditButton = !isGuestUser && !isSharedUser && shareLinkId == null;
 
   return (

+ 1 - 4
packages/app/src/components/ReactMarkdownComponents/NextLink.tsx

@@ -1,5 +1,4 @@
 import Link, { LinkProps } from 'next/link';
-import { Link as ScrollLink } from 'react-scroll';
 
 import { useSiteUrl } from '~/stores/context';
 import loggerFactory from '~/utils/logger';
@@ -42,9 +41,7 @@ export const NextLink = ({
   // when href is an anchor link
   if (isAnchorLink(href)) {
     return (
-      <Link href={href} shallow >
-        <a href={href} className={className}>{children}</a>
-      </Link>
+      <a href={href} className={className}>{children}</a>
     );
   }