fix: update Link

Author: 521xueweihan

src/components/dropdown/AvatarWithDropdown.tsx

@@ -4,7 +4,7 @@ import { useLoginContext } from '@/hooks/useLoginContext';
 
 import LanguageSwitcher from '@/components/buttons/LanguageSwitcher';
 import ThemeSwitcher from '@/components/buttons/ThemeSwitcher';
-import CustomLink from '@/components/links/CustomLink';
+import { CustomLink } from '@/components/links/CustomLink';
 
 import { DEFAULT_AVATAR } from '@/utils/constants';
 

src/components/home/Item.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link';
 import { AiFillFire, AiOutlineEye } from 'react-icons/ai';
 import { GoStar, GoVerified } from 'react-icons/go';
 
-import CustomLink from '@/components/links/CustomLink';
+import { CustomLink } from '@/components/links/CustomLink';
 
 import { fromNow } from '@/utils/day';
 import { numFormat } from '@/utils/util';

src/components/layout/ErrorPage.tsx

@@ -1,8 +1,8 @@
-import Link from 'next/link';
 import { IoIosArrowForward } from 'react-icons/io';
 
 import LanguageSwitcher from '@/components/buttons/LanguageSwitcher';
 import ThemeSwitcher from '@/components/buttons/ThemeSwitcher';
+import { NoPrefetchLink } from '@/components/links/CustomLink';
 
 type Props = {
   httpCode: number;
@@ -24,7 +24,7 @@ const ErrorPage = ({ t, httpCode }: Props) => {
               width={500}
             />
           </div>
-          <Link href='/'>
+          <NoPrefetchLink href='/'>
             <a>
               <div className='group relative inline-flex cursor-pointer items-center overflow-hidden rounded border border-current px-7 py-2 text-blue-600 focus:outline-none focus:ring active:text-blue-500 dark:text-gray-500 dark:active:text-gray-500'>
                 <span className='absolute right-0 translate-x-full transition-transform group-hover:-translate-x-4'>
@@ -36,27 +36,27 @@ const ErrorPage = ({ t, httpCode }: Props) => {
                 </span>
               </div>
             </a>
-          </Link>
+          </NoPrefetchLink>
           <div className='mt-4 block text-xs text-gray-400'>
-            <Link href='mailto:[email protected]'>
+            <NoPrefetchLink href='mailto:[email protected]'>
               <a
                 target='_blank'
                 className='cursor-pointer hover:underline'
                 rel='noreferrer'
               >
                 <span>{t('footer.feedback')}</span>
               </a>
-            </Link>
+            </NoPrefetchLink>
             <span className='px-1'>·</span>
-            <Link href='https://github.com/HelloGitHub-Team/geese'>
+            <NoPrefetchLink href='https://github.com/HelloGitHub-Team/geese'>
               <a
                 target='_blank'
                 className='cursor-pointer hover:underline'
                 rel='noreferrer'
               >
                 <span>{t('footer.source')}</span>
               </a>
-            </Link>
+            </NoPrefetchLink>
 
             <p className='mt-2'>
               <span className='cursor-default'>

src/components/layout/Footer.tsx

@@ -2,7 +2,7 @@ import { AiFillWechat, AiFillWeiboCircle } from 'react-icons/ai';
 import { IoLogoRss } from 'react-icons/io';
 
 import { FeedbackModal } from '@/components/dialog/Feedback';
-import CustomLink from '@/components/links/CustomLink';
+import { CustomLink } from '@/components/links/CustomLink';
 
 import FooterLink from './FooterLink';
 
@@ -30,7 +30,11 @@ const Footer = ({ t }: SideProps) => {
       </div>
 
       <p className='mt-2'>
-        <FooterLink href='/help/ats'>{t('footer.agreement')}</FooterLink>
+        <CustomLink className='inline' href='/help/ats'>
+          <span className='cursor-pointer hover:text-blue-500'>
+            {t('footer.agreement')}
+          </span>
+        </CustomLink>
         <span className='px-1 lg:px-1.5'>·</span>
         <FooterLink href='https://github.com/HelloGitHub-Team/geese'>
           {t('footer.source')}

src/components/links/CustomLink.tsx

@@ -9,7 +9,7 @@ type Props = {
   onClick?: any;
 } & React.ComponentPropsWithoutRef<'div'>;
 
-const CustomLink = ({ href, className, children, onClick }: Props) => {
+export const CustomLink = ({ href, className, children, onClick }: Props) => {
   const [isMobile, setIsMobile] = useState<boolean>(false);
   useEffect(() => {
     if (
@@ -35,4 +35,10 @@ const CustomLink = ({ href, className, children, onClick }: Props) => {
   );
 };
 
-export default CustomLink;
+export const NoPrefetchLink = ({ href, children }: Props) => {
+  return (
+    <Link prefetch={false} href={href}>
+      {children}
+    </Link>
+  );
+};

src/components/links/TagItem.tsx

@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { NoPrefetchLink } from '@/components/links/CustomLink';
 
 interface Props {
   name: string;
@@ -7,11 +7,11 @@ interface Props {
 
 const TagItem = ({ name, tid }: Props) => {
   return (
-    <Link href={`/?sort_by=hot&tid=${tid}`}>
+    <NoPrefetchLink href={`/?sort_by=hot&tid=${tid}`}>
       <a className='inline-flex h-8 items-center justify-center rounded-lg pl-3 pr-3 text-sm font-bold text-blue-400 hover:bg-blue-400 hover:text-white'>
         {name}
       </a>
-    </Link>
+    </NoPrefetchLink>
   );
 };
 

src/components/links/TagLink.tsx

@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { NoPrefetchLink } from '@/components/links/CustomLink';
 
 import { TagType } from '@/types/tag';
 
@@ -15,7 +15,9 @@ export default function TagLink(props: Props) {
         {props.items.map((item: TagType) => {
           return (
             <li className='shrink-0 grow-0 basis-auto' key={item.tid}>
-              <Link href={`/?sort_by=${props.sort_by}&tid=${item.tid}`}>
+              <NoPrefetchLink
+                href={`/?sort_by=${props.sort_by}&tid=${item.tid}`}
+              >
                 {props.tid == item.tid ? (
                   <a className='mt-1 mr-1 inline-flex h-6 items-center justify-center rounded-xl bg-gray-100 px-0 pl-2 pr-2 text-blue-500 dark:bg-gray-700 dark:focus:bg-gray-700'>
                     {item.name}
@@ -25,7 +27,7 @@ export default function TagLink(props: Props) {
                     {item.name}
                   </a>
                 )}
-              </Link>
+              </NoPrefetchLink>
             </li>
           );
         })}

src/components/navbar/ArticleBar.tsx

@@ -1,8 +1,9 @@
 import classNames from 'classnames';
-import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { AiOutlineArrowLeft } from 'react-icons/ai';
 
+import { NoPrefetchLink } from '@/components/links/CustomLink';
+
 type Props = {
   t: (key: string) => string;
 };
@@ -41,12 +42,12 @@ const ArticleNavbar = ({ t }: Props) => {
           {t('nav.title')}
         </div>
         <div className='flex justify-end text-sm text-gray-500 dark:text-gray-400'>
-          <Link href='/article?sort_by=last'>
+          <NoPrefetchLink href='/article?sort_by=last'>
             <a className={linkClassName('last')}>{t('nav.last')}</a>
-          </Link>
-          <Link href='/article?sort_by=hot'>
+          </NoPrefetchLink>
+          <NoPrefetchLink href='/article?sort_by=hot'>
             <a className={linkClassName('hot')}>{t('nav.hot')}</a>
-          </Link>
+          </NoPrefetchLink>
         </div>
       </div>
     </div>

src/components/navbar/IndexBar.tsx

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
 import { NextPage } from 'next';
-import Link from 'next/link';
 
 import useTagHandling from '@/hooks/useTagHandling';
 
 import { RepoModal } from '@/components/dialog/RepoModal';
+import { NoPrefetchLink } from '@/components/links/CustomLink';
 import TagLink from '@/components/links/TagLink';
 
 type Props = {
@@ -31,12 +31,12 @@ const IndexBar: NextPage<Props> = ({ t, i18n_lang, tid, sort_by }) => {
   return (
     <div className='relative my-2 overflow-hidden bg-white dark:bg-gray-800 md:rounded-lg'>
       <div className='flex h-12 shrink grow items-center justify-start space-x-1 py-2 px-4 md:space-x-2'>
-        <Link href={featuredURL}>
+        <NoPrefetchLink href={featuredURL}>
           <a className={linkClassName('featured')}>{t('nav.featured')}</a>
-        </Link>
-        <Link href={allURL}>
+        </NoPrefetchLink>
+        <NoPrefetchLink href={allURL}>
           <a className={linkClassName('all')}>{t('nav.all')}</a>
-        </Link>
+        </NoPrefetchLink>
         <span onClick={handleTagButton} className={linkClassName('label')}>
           {t('nav.tag')}
         </span>

src/components/navbar/RepoNavbar.tsx

@@ -1,7 +1,8 @@
-import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { AiOutlineArrowLeft } from 'react-icons/ai';
 
+import { NoPrefetchLink } from '@/components/links/CustomLink';
+
 interface Props {
   avatar: string;
   uid: string;
@@ -31,7 +32,7 @@ const RepoDetailNavbar = ({ avatar, uid, t }: Props) => {
         <div className='text-center font-bold dark:text-gray-300'>
           {t('nav.title')}
         </div>
-        <Link href={`/user/${uid}`}>
+        <NoPrefetchLink href={`/user/${uid}`}>
           <div className='flex cursor-pointer items-center justify-end text-xs text-gray-500 hover:text-blue-400 dark:text-gray-400'>
             {t('nav.desc')}
             <a className='m-1 flex items-center'>
@@ -45,7 +46,7 @@ const RepoDetailNavbar = ({ avatar, uid, t }: Props) => {
             </a>
             {t('nav.desc2')}
           </div>
-        </Link>
+        </NoPrefetchLink>
       </div>
     </div>
   );