pref: 为 Link 组件添加 suppressHydrationWarning 属性- 在多个页面组件中，为 Link 组件添加 suppressHydrationWarning 属性

- 此修改可以抑制 React 的 Hydration 警告，提高应用的性能和用户体验

src/pages/dashboard/workplace/announcement.tsx

@@ -46,7 +46,7 @@ function Announcement() {
         <Typography.Title heading={6}>
           {t['workplace.announcement']}
         </Typography.Title>
-        <Link>{t['workplace.seeMore']}</Link>
+        <Link suppressHydrationWarning>{t['workplace.seeMore']}</Link>
       </div>
       <Skeleton loading={loading} text={{ rows: 5, width: '100%' }} animation>
         <div>
@@ -64,4 +64,4 @@ function Announcement() {
   );
 }
 
-export default Announcement;
+export default Announcement;

src/pages/dashboard/workplace/docs.tsx

@@ -17,11 +17,11 @@ function QuickOperation() {
     <Card>
       <div style={{ display: 'flex', justifyContent: 'space-between' }}>
         <Typography.Title heading={6}>{t['workplace.docs']}</Typography.Title>
-        <Link>{t['workplace.seeMore']}</Link>
+        <Link suppressHydrationWarning>{t['workplace.seeMore']}</Link>
       </div>
       <div className={styles.docs}>
         {Object.entries(links).map(([key, value]) => (
-          <Link className={styles.link} key={key} href={value} target="_blank">
+          <Link className={styles.link} key={key} href={value} target="_blank" suppressHydrationWarning>
             {t[`workplace.${key}`]}
           </Link>
         ))}
@@ -30,4 +30,4 @@ function QuickOperation() {
   );
 }
 
-export default QuickOperation;
+export default QuickOperation;

src/pages/dashboard/workplace/overview.tsx

@@ -145,7 +145,7 @@ function Overview() {
               ({t['workplace.1year']})
             </span>
           </Typography.Paragraph>
-          <Link>{t['workplace.seeMore']}</Link>
+          <Link suppressHydrationWarning>{t['workplace.seeMore']}</Link>
         </div>
         <OverviewAreaLine data={data.chartData} loading={loading} />
       </div>

src/pages/dashboard/workplace/popular-contents.tsx

@@ -84,7 +84,7 @@ function PopularContent() {
         <Typography.Title heading={6}>
           {t['workplace.popularContents']}
         </Typography.Title>
-        <Link>{t['workplace.seeMore']}</Link>
+        <Link suppressHydrationWarning>{t['workplace.seeMore']}</Link>
       </div>
       <Radio.Group
         type="button"

src/pages/dashboard/workplace/shortcuts.tsx

@@ -82,7 +82,7 @@ function Shortcuts() {
         <Typography.Title heading={6}>
           {t['workplace.shortcuts']}
         </Typography.Title>
-        <Link>{t['workplace.seeMore']}</Link>
+        <Link suppressHydrationWarning>{t['workplace.seeMore']}</Link>
       </div>
       <div className={styles.shortcuts}>
         {shortcuts.map((shortcut) => (
@@ -114,4 +114,4 @@ function Shortcuts() {
   );
 }
 
-export default Shortcuts;
+export default Shortcuts;

src/pages/layout.tsx

@@ -11,7 +11,7 @@ import {
   IconExclamationCircle,
   IconUser,
   IconMenuFold,
-  IconMenuUnfold,
+  IconMenuUnfold
 } from '@arco-design/web-react/icon';
 import { useSelector } from 'react-redux';
 import { useRouter } from 'next/router';
@@ -146,8 +146,8 @@ function PageLayout({ children }: { children: ReactNode }) {
         menuMap.current.set(route.key, { menuItem: true });
         return (
           <MenuItem key={route.key}>
-            <Link href={`/${route.key}`}>
+            <Link href={`/${route.key}`} passHref>
-              <a>{titleDom}</a>
+              <a suppressHydrationWarning>{titleDom}</a>
             </Link>
           </MenuItem>
         );
@@ -185,7 +185,7 @@ function PageLayout({ children }: { children: ReactNode }) {
     <Layout className={styles.layout}>
       <div
         className={cs(styles['layout-navbar'], {
-          [styles['layout-navbar-hidden']]: !showNavbar,
+          [styles['layout-navbar-hidden']]: !showNavbar
         })}
       >
         <Navbar show={showNavbar} />

src/pages/login/form.tsx

@@ -111,7 +111,7 @@ export default function LoginForm() {
             <Checkbox checked={rememberPassword} onChange={setRememberPassword}>
               {t['login.form.rememberPassword']}
             </Checkbox>
-            <Link>{t['login.form.forgetPassword']}</Link>
+            <Link suppressHydrationWarning>{t['login.form.forgetPassword']}</Link>
           </div>
           <Button type="primary" long onClick={onSubmitClick} loading={loading}>
             {t['login.form.login']}

src/pages/result/error/index.tsx

@@ -33,14 +33,14 @@ function Success() {
             <ol>
               <li>
                 {t['error.detailLine.record']}
-                <Link>
+                <Link suppressHydrationWarning>
                   <IconLink />
                   {t['error.detailLine.record.link']}
                 </Link>
               </li>
               <li>
                 {t['error.detailLine.auth']}
-                <Link>{t['error.detailLine.auth.link']}</Link>
+                <Link suppressHydrationWarning>{t['error.detailLine.auth.link']}</Link>
               </li>
             </ol>
           </Typography.Paragraph>
@@ -50,4 +50,4 @@ function Success() {
   );
 }
 
-export default Success;
+export default Success;

src/pages/user/info/index.tsx

@@ -46,7 +46,7 @@ function UserInfo() {
               <Title heading={6} style={{ marginBottom: '20px' }}>
                 {t['userInfo.title.project']}
               </Title>
-              <Link>{t['userInfo.btn.more']}</Link>
+              <Link suppressHydrationWarning>{t['userInfo.btn.more']}</Link>
             </div>
             <MyProject />
           </Card>
@@ -69,7 +69,7 @@ function UserInfo() {
               <Title heading={6} style={{ marginBottom: '8px' }}>
                 {t['userInfo.title.news']}
               </Title>
-              <Link>{t['userInfo.btn.all']}</Link>
+              <Link suppressHydrationWarning>{t['userInfo.btn.all']}</Link>
             </div>
             <LatestNews />
           </Card>

src/pages/user/setting/header.tsx

@@ -81,7 +81,7 @@ export default function Info({
                     {t['userSetting.value.notVerified']}
                   </Tag>
                 )}
-                <Link role="button" className={styles['edit-btn']}>
+                <Link role="button" className={styles['edit-btn']} suppressHydrationWarning>
                   {t['userSetting.btn.edit']}
                 </Link>
               </span>
@@ -98,7 +98,7 @@ export default function Info({
             ) : (
               <span>
                 {userInfo.phoneNumber}
-                <Link role="button" className={styles['edit-btn']}>
+                <Link role="button" className={styles['edit-btn']} suppressHydrationWarning>
                   {t['userSetting.btn.edit']}
                 </Link>
               </span>

src/pages/welcome/index.tsx

@@ -50,12 +50,13 @@ export default function Welcome() {
             <Link
               target="_blank"
               href="https://arco.design/material?category=arco-design-pro"
+              suppressHydrationWarning
             >
               {t['welcome.link.material-pro']} <IconDoubleRight />
             </Link>
           </div>
           <div style={{ marginTop: 8 }}>
-            <Link target="_blank" href="https://arco.design/material">
+            <Link target="_blank" href="https://arco.design/material" suppressHydrationWarning>
               {t['welcome.link.material-all']} <IconDoubleRight />
             </Link>
           </div>
@@ -63,4 +64,4 @@ export default function Welcome() {
       </div>
     </div>
   );
-}
+}