refactor: use link helper over Gatsby's Link (#55767)

client/src/client-only-routes/show-update-email.tsx

@@ -1,4 +1,3 @@
-import { Link } from 'gatsby';
 import React, {
   useState,
   useEffect,
@@ -21,7 +20,7 @@ import {
 } from '@freecodecamp/ui';
 
 import envData from '../../config/env.json';
-import { Spacer, Loader } from '../components/helpers';
+import { Spacer, Loader, Link } from '../components/helpers';
 import './show-update-email.css';
 import { isSignedInSelector, userSelector } from '../redux/selectors';
 import { hardGoTo as navigate } from '../redux/actions';

client/src/components/FourOhFour/index.tsx

@@ -1,12 +1,11 @@
 import { RouteComponentProps } from '@reach/router';
-import { Link } from 'gatsby';
 import React from 'react';
 import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 
 import notFoundLogo from '../../assets/images/freeCodeCamp-404.svg';
 import { randomQuote } from '../../utils/get-words';
-import { Spacer } from '../helpers';
+import { Spacer, Link } from '../helpers';
 
 import './404.css';
 

client/src/components/helpers/button-link.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { Link as GatsbyLink } from 'gatsby';
 import { Button } from '@freecodecamp/ui';
 
+import Link from './link';
+
 export type ButtonSize = 'small' | 'medium' | 'large';
 
 interface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -67,13 +68,8 @@ export const ButtonLink = ({
   }
 
   return (
-    <GatsbyLink
-      className={gatsbyLinkCls}
-      to={href}
-      target={target}
-      onClick={onClick}
-    >
+    <Link className={gatsbyLinkCls} to={href} target={target} onClick={onClick}>
       {children}
-    </GatsbyLink>
+    </Link>
   );
 };

client/src/components/settings/certification.tsx

@@ -1,4 +1,4 @@
-import { Link, navigate } from 'gatsby';
+import { navigate } from 'gatsby';
 import { find } from 'lodash-es';
 import React, { MouseEvent, useState } from 'react';
 import { withTranslation } from 'react-i18next';
@@ -21,7 +21,7 @@ import {
 } from '../../../config/cert-and-project-map';
 import { FlashMessages } from '../Flash/redux/flash-messages';
 import ProjectModal from '../SolutionViewer/project-modal';
-import { FullWidthRow, Spacer } from '../helpers';
+import { FullWidthRow, Spacer, Link } from '../helpers';
 import { SolutionDisplayWidget } from '../solution-display-widget';
 import {
   Certification,

client/src/components/settings/email.tsx

@@ -7,7 +7,6 @@ import {
   ControlLabel,
   Button
 } from '@freecodecamp/ui';
-import { Link } from 'gatsby';
 import React, { useState } from 'react';
 import type { TFunction } from 'i18next';
 import { Trans, withTranslation } from 'react-i18next';
@@ -22,6 +21,7 @@ import { maybeEmailRE } from '../../utils';
 import BlockSaveButton from '../helpers/form/block-save-button';
 import FullWidthRow from '../helpers/full-width-row';
 import Spacer from '../helpers/spacer';
+import Link from '../helpers/link';
 import SectionHeader from './section-header';
 import ToggleButtonSetting from './toggle-button-setting';
 

client/src/templates/Introduction/components/challenges.tsx

@@ -1,4 +1,3 @@
-import { Link } from 'gatsby';
 import React from 'react';
 import { withTranslation, useTranslation } from 'react-i18next';
 
@@ -7,6 +6,7 @@ import GreenPass from '../../../assets/icons/green-pass';
 import { ChallengeWithCompletedNode } from '../../../redux/prop-types';
 import { SuperBlocks } from '../../../../../shared/config/curriculum';
 import { challengeTypes } from '../../../../../shared/config/challenge-types';
+import { Link } from '../../../components/helpers';
 import { ButtonLink } from '../../../components/helpers/button-link';
 
 const getStepNumber = (dashedName: string) => {