diff --git a/docs/components/components/Main/MainSection/index.tsx b/docs/components/components/Main/MainSection/index.tsx
index b45b7993de..bdafad4090 100644
--- a/docs/components/components/Main/MainSection/index.tsx
+++ b/docs/components/components/Main/MainSection/index.tsx
@@ -1,8 +1,8 @@
 import { Button } from 'antd-mobile'
+import { Link } from 'dumi'
 import React, { useEffect, useState } from 'react'
 import Lottie from 'react-lottie'
 import { useTrans } from '../../../../hooks/useTrans'
-import { openUrl } from '../../../../utils'
 import styles from './index.local.less'
 
 export default (props: { isWidthScreen: boolean }) => {
@@ -36,30 +36,24 @@ export default (props: { isWidthScreen: boolean }) => {
           )}
         </div>
         <div className={styles.mainSectionButtonAction}>
-          <Button
-            color='primary'
-            shape='rounded'
-            className={styles.buttonLeft}
-            onClick={() =>
-              openUrl({
-                href: trans('/guide/quick-start', '/zh/guide/quick-start'),
-              })
-            }
-          >
-            {trans('Get Start', '开始使用')}
-          </Button>
-          <Button
-            color='primary'
-            shape='rounded'
-            className={styles.buttonRight}
-            onClick={() =>
-              openUrl({
-                href: trans('/components', '/zh/components'),
-              })
-            }
-          >
-            {trans('Preview Online', '在线体验')}
-          </Button>
+          <Link to={trans('/guide/quick-start', '/zh/guide/quick-start')}>
+            <Button
+              color='primary'
+              shape='rounded'
+              className={styles.buttonLeft}
+            >
+              {trans('Get Start', '开始使用')}
+            </Button>
+          </Link>
+          <Link to={trans('/components', '/zh/components')}>
+            <Button
+              color='primary'
+              shape='rounded'
+              className={styles.buttonRight}
+            >
+              {trans('Preview Online', '在线体验')}
+            </Button>
+          </Link>
         </div>
       </div>
       <div className={styles.imageContainer}>
diff --git a/docs/components/components/Main/index.tsx b/docs/components/components/Main/index.tsx
index 9187d6974e..a41c772b1a 100644
--- a/docs/components/components/Main/index.tsx
+++ b/docs/components/components/Main/index.tsx
@@ -1,10 +1,10 @@
 import { RightOutlined } from '@ant-design/icons'
 import { useSize } from 'ahooks'
 import { Button, Card } from 'antd-mobile'
+import { Link } from 'dumi'
 import React, { useEffect, useRef, useState } from 'react'
 import Lottie from 'react-lottie'
 import { useTrans } from '../../../hooks/useTrans'
-import { openUrl } from '../../../utils'
 import MainSection from './MainSection'
 import {
   getGuides,
@@ -98,17 +98,11 @@ export default () => {
                   <div className={styles.productResourceCardDescription}>
                     {resource.description}
                   </div>
-                  <Button
-                    className={styles.productResourceCardButton}
-                    onClick={() =>
-                      openUrl({
-                        href: resource.buttonLink,
-                        target: resource.target,
-                      })
-                    }
-                  >
-                    {resource.buttonText}
-                  </Button>
+                  <Link to={resource.buttonLink} target={resource.target}>
+                    <Button className={styles.productResourceCardButton}>
+                      {resource.buttonText}
+                    </Button>
+                  </Link>
                 </div>
               </Card>
             ))}