feat: use RouterLink

gravity-ui · May 29, 2023 · 24c41c0 · 24c41c0
1 parent 7a4fb6a
commit 24c41c0
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 38 deletions.
diff --git a/src/blocks/Icons/Icons.tsx b/src/blocks/Icons/Icons.tsx
@@ -1,6 +1,6 @@
 import React, {useContext} from 'react';
 
-import {BlockHeader, Image} from '../../components';
+import {BlockHeader, Image, RouterLink} from '../../components';
 import {LocationContext} from '../../context/locationContext';
 import {IconsBlockProps} from '../../models';
 import {block, getLinkProps} from '../../utils';
@@ -16,15 +16,15 @@ const Icons = ({title, size = 's', items}: IconsBlockProps) => {
         <div className={b({size})}>
             {title && <BlockHeader className={b('header')} title={title} colSizes={{all: 12}} />}
             {items.map((item) => (
-                <a
+                <RouterLink
                     className={b('item')}
                     key={item.url}
                     href={item.url}
                     {...getLinkProps(item.url, hostname)}
                 >
                     <Image className={b('image')} src={item.src} />
                     <p className={b('text')}>{item.text}</p>
-                </a>
+                </RouterLink>
             ))}
         </div>
     );

diff --git a/src/components/FileLink/FileLink.tsx b/src/components/FileLink/FileLink.tsx
@@ -3,6 +3,7 @@ import React, {useContext} from 'react';
 import {LocationContext} from '../../context/locationContext';
 import {FileLinkProps, WithChildren} from '../../models';
 import {block, getLinkProps} from '../../utils';
+import RouterLink from '../RouterLink/RouterLink';
 
 import './FileLink.scss';
 
@@ -46,9 +47,14 @@ const FileLink = (props: WithChildren<FileLinkProps>) => {
                 <div className={b('file-label')}>{fileExt}</div>
             )}
             <div className={b('link')}>
-                <a href={href} {...getLinkProps(href, hostname)} onClick={onClick}>
+                <RouterLink
+                    href={href}
+                    {...getLinkProps(href, hostname)}
+                    onClick={onClick}
+                    forceAnchor
+                >
                     {text}
-                </a>
+                </RouterLink>
             </div>
         </div>
     );

diff --git a/src/components/HeaderBreadcrumbs/HeaderBreadcrumbs.tsx b/src/components/HeaderBreadcrumbs/HeaderBreadcrumbs.tsx
@@ -4,6 +4,7 @@ import {useAnalytics} from '../../hooks';
 import {useMetrika} from '../../hooks/useMetrika';
 import {DefaultEventNames, HeaderBreadCrumbsProps} from '../../models';
 import {block} from '../../utils';
+import RouterLink from '../RouterLink/RouterLink';
 
 import './HeaderBreadcrumbs.scss';
 
@@ -23,9 +24,9 @@ export default function HeaderBreadcrumbs(props: HeaderBreadCrumbsProps) {
         <div className={b({theme}, className)}>
             {items.map((item) => (
                 <div className={b('item')} key={item.url}>
-                    <a href={item.url} className={b('text')} onClick={onClick}>
+                    <RouterLink href={item.url} className={b('text')} onClick={onClick}>
                         {item.text}
-                    </a>
+                    </RouterLink>
                 </div>
             ))}
         </div>

diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
@@ -11,6 +11,7 @@ import {ClassNameProps, DefaultEventNames, LinkProps, TextSize, WithChildren} fr
 import {block, getLinkProps, setUrlTld} from '../../utils';
 import BackLink from '../BackLink/BackLink';
 import FileLink from '../FileLink/FileLink';
+import RouterLink from '../RouterLink/RouterLink';
 
 import './Link.scss';
 
@@ -80,7 +81,7 @@ const LinkBlock = (props: WithChildren<LinkFullProps>) => {
                 const content = children || text;
 
                 return (
-                    <a
+                    <RouterLink
                         className={b('link', {theme: colorTheme, 'has-arrow': arrow})}
                         href={href}
                         onClick={onClick}
@@ -99,7 +100,7 @@ const LinkBlock = (props: WithChildren<LinkFullProps>) => {
                         ) : (
                             content
                         )}
-                    </a>
+                    </RouterLink>
                 );
             }
             default:

diff --git a/src/components/RouterLink/RouterLink.tsx b/src/components/RouterLink/RouterLink.tsx
@@ -2,6 +2,7 @@ import React, {useContext} from 'react';
 
 import {LocationContext} from '../../context/locationContext';
 import {WithChildren} from '../../models';
+import {EXTERNAL_LINK_PROPS, isLinkExternal} from '../../utils';
 
 export interface RouterLinkProps {
     href: string;
@@ -14,16 +15,18 @@ export interface RouterLinkProps {
 
 const RouterLink = ({
     href,
-    target = '_blank',
     rel,
-    forceAnchor = false,
     children,
+    target,
+    forceAnchor = false,
     ...commonProps
 }: WithChildren<RouterLinkProps>) => {
-    const {Link} = useContext(LocationContext);
+    const {Link, hostname} = useContext(LocationContext);
 
-    const isExternal = href?.startsWith('http://') || href?.startsWith('https://');
-    const shouldAnchorTag = typeof href === 'string' && (!Link || isExternal || forceAnchor);
+    const isExternal = isLinkExternal(href, hostname);
+    const shouldAnchorTag =
+        typeof href === 'string' &&
+        (!Link || isExternal || forceAnchor || target === EXTERNAL_LINK_PROPS.target);
     const component = shouldAnchorTag ? 'a' : Link;
 
     if (!component) {
@@ -33,7 +36,7 @@ const RouterLink = ({
     const linkProps = {
         href,
         target,
-        rel: target === '_blank' && !rel ? 'noopener noreferrer' : rel,
+        rel: target === EXTERNAL_LINK_PROPS.target && !rel ? EXTERNAL_LINK_PROPS.rel : rel,
     };
 
     return React.createElement(
@@ -42,7 +45,6 @@ const RouterLink = ({
             href,
             ...(shouldAnchorTag ? linkProps : {}),
             ...commonProps,
-            area: shouldAnchorTag ? '1' : '2',
         },
         children,
     );

diff --git a/src/components/Title/Title.tsx b/src/components/Title/Title.tsx
@@ -1,6 +1,6 @@
 import React, {Fragment, ReactNode, useContext} from 'react';
 
-import {HTML, ToggleArrow} from '../';
+import {HTML, RouterLink, ToggleArrow} from '../';
 import {LocationContext} from '../../context/locationContext';
 import {MobileContext} from '../../context/mobileContext';
 import {TextSize, TitleProps} from '../../models';
@@ -81,9 +81,14 @@ const Title = (props: TitleFullProps) => {
         content = textMarkup;
     } else if (url) {
         content = (
-            <a className={b('link')} href={url} {...getLinkProps(url, hostname)} onClick={onClick}>
+            <RouterLink
+                className={b('link')}
+                href={url}
+                {...getLinkProps(url, hostname)}
+                onClick={onClick}
+            >
                 {insideClickableContent}
-            </a>
+            </RouterLink>
         );
     } else if (onClick) {
         content = (

diff --git a/src/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.tsx b/src/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.tsx
@@ -16,7 +16,7 @@ const b = block('navigation-link');
 type NavigationLinkProps = NavigationItemProps & NavigationLinkItem;
 
 export const NavigationLink: React.FC<NavigationLinkProps> = (props) => {
-    const {hostname, Link} = useContext(LocationContext);
+    const {hostname} = useContext(LocationContext);
     const {url, text, icon, arrow, target, className, iconSize, ...rest} = props;
     const linkExtraProps = getLinkProps(url, hostname, target);
     const iconData = icon && getMediaImage(icon);
@@ -29,19 +29,9 @@ export const NavigationLink: React.FC<NavigationLinkProps> = (props) => {
         </Fragment>
     );
 
-    if (linkExtraProps?.target || !Link) {
-        return (
-            <a href={url} title={text} className={classes} {...rest} {...linkExtraProps}>
-                {content}
-            </a>
-        );
-    } else {
-        return (
-            <RouterLink href={url} passHref>
-                <a {...rest} className={classes}>
-                    {content}
-                </a>
-            </RouterLink>
-        );
-    }
+    return (
+        <RouterLink href={url} title={text} className={classes} {...rest} {...linkExtraProps}>
+            {content}
+        </RouterLink>
+    );
 };
diff --git a/src/navigation/components/SocialIcon/SocialIcon.tsx b/src/navigation/components/SocialIcon/SocialIcon.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Image} from '../../../components';
+import {Image, RouterLink} from '../../../components';
 import {getMediaImage} from '../../../components/Media/Image/utils';
 import {NavigationSocialItem} from '../../../models';
 import {block} from '../../../utils';
@@ -17,9 +17,9 @@ const SocialIcon: React.FC<NavigationSocialItemOwnProps> = ({icon, url, classNam
     const iconData = getMediaImage(icon);
 
     return (
-        <a href={url} target="_blank" rel="noopener noreferrer" className={b(null, className)}>
+        <RouterLink href={url} target="_blank" className={b(null, className)}>
             <Image className={b('icon')} {...iconData} />
-        </a>
+        </RouterLink>
     );
 };