react-router-dom

src/components/link/link.styled.ts

@@ -1,7 +1,9 @@
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
+import { Link as ConnectedLink } from 'react-router-dom';
 
-export const StyledLink = styled.a<{
+
+export const StyledLink = styled(ConnectedLink)<{
   contrast?: boolean;
   inheritColor?: boolean;
 }>`

src/components/link/link.tsx

@@ -22,7 +22,7 @@ export const Link = (props: LinkProps) => {
   }
 
   return (
-    <StyledLink inheritColor={props.inheritColor} contrast={props.contrast} href={props.href} {...linkProps}>
+    <StyledLink reloadDocument={isExternal} inheritColor={props.inheritColor} contrast={props.contrast} to={props.href} {...linkProps}>
       {props.children}
       {isExternal && <img src={externalIcon} alt="external link icon" />}
     </StyledLink>