diff --git a/src/blocks/Icons/Icons.tsx b/src/blocks/Icons/Icons.tsx
index d2bf3b679..33fb08cab 100644
--- 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,7 +16,7 @@ const Icons = ({title, size = 's', items}: IconsBlockProps) => {
);
diff --git a/src/components/FileLink/FileLink.tsx b/src/components/FileLink/FileLink.tsx
index 9e4e0a48b..fa2df4b03 100644
--- 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) => {
{fileExt}
)}
);
diff --git a/src/components/HeaderBreadcrumbs/HeaderBreadcrumbs.tsx b/src/components/HeaderBreadcrumbs/HeaderBreadcrumbs.tsx
index c1e2a4bcc..f6c721ba7 100644
--- 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) {
{items.map((item) => (
))}
diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
index a5dfb81c1..94a6bdece 100644
--- 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) => {
const content = children || text;
return (
- ) => {
) : (
content
)}
-
+
);
}
default:
diff --git a/src/components/RouterLink/RouterLink.tsx b/src/components/RouterLink/RouterLink.tsx
index b0359ae2b..60b866b01 100644
--- 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) => {
- 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
index ac9a0e0f1..59dea1f95 100644
--- 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 = (
-
+
{insideClickableContent}
-
+
);
} else if (onClick) {
content = (
diff --git a/src/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.tsx b/src/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.tsx
index 0c95a5866..a6b2e4a3a 100644
--- 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 = (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 = (props) => {
);
- if (linkExtraProps?.target || !Link) {
- return (
-
- {content}
-
- );
- } else {
- return (
-
-
- {content}
-
-
- );
- }
+ return (
+
+ {content}
+
+ );
};
diff --git a/src/navigation/components/SocialIcon/SocialIcon.tsx b/src/navigation/components/SocialIcon/SocialIcon.tsx
index 6004d39b8..bfbfe137c 100644
--- 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 = ({icon, url, classNam
const iconData = getMediaImage(icon);
return (
-
+
-
+
);
};