made transitional Anchor component for next/cra

src/components/common/Anchor/index.tsx

@@ -0,0 +1,16 @@
+import React, { VFC } from 'react';
+import { LinkProps } from '~/utils/types';
+import { CONFIG } from '~/utils/config';
+import NextLink from 'next/link';
+import { Link } from 'react-router-dom';
+
+interface AnchorProps extends LinkProps {}
+
+const Anchor: VFC<AnchorProps> = ({ ref, href, ...rest }) =>
+  CONFIG.isNextEnvironment ? (
+    <NextLink {...rest} href={href ?? ''} />
+  ) : (
+    <Link {...rest} to={href ?? ''} />
+  );
+
+export { Anchor };

src/components/flow/FlowRecentItem/index.tsx

@@ -4,9 +4,9 @@ import styles from './styles.module.scss';
 import { URLS } from '~/constants/urls';
 import { NodeRelatedItem } from '~/components/node/NodeRelatedItem';
 import { getPrettyDate } from '~/utils/dom';
-import { Link } from 'react-router-dom';
 import classNames from 'classnames';
 import { Icon } from '~/components/input/Icon';
+import { Anchor } from '~/components/common/Anchor';
 
 interface IProps {
   node: Partial<INode>;
@@ -15,7 +15,7 @@ interface IProps {
 
 const FlowRecentItem: FC<IProps> = ({ node, has_new }) => {
   return (
-    <Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
+    <Anchor key={node.id} className={styles.item} href={URLS.NODE_URL(node.id)}>
       <div
         className={classNames(styles.thumb, {
           [styles.new]: has_new,
@@ -33,7 +33,7 @@ const FlowRecentItem: FC<IProps> = ({ node, has_new }) => {
           <span>{getPrettyDate(node.created_at)}</span>
         </div>
       </div>
-    </Link>
+    </Anchor>
   );
 };
 

src/components/main/Logo/index.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import styles from './styles.module.scss';
-import { Link } from 'react-router-dom';
+import { Anchor } from '~/components/common/Anchor';
+import { URLS } from '~/constants/urls';
 
 export const Logo = () => (
-  <Link className={styles.logo} to="/">
+  <Anchor className={styles.logo} href={URLS.BASE}>
     VAULT
-  </Link>
+  </Anchor>
 );

src/components/node/NodeRelatedBlock/index.tsx

@@ -4,7 +4,7 @@ import { NodeRelated } from '~/components/node/NodeRelated';
 import { URLS } from '~/constants/urls';
 import { INode } from '~/types';
 import { INodeRelated } from '~/types/node';
-import { Link } from 'react-router-dom';
+import { Anchor } from '~/components/common/Anchor';
 
 interface IProps {
   isLoading: boolean;
@@ -27,7 +27,9 @@ const NodeRelatedBlock: FC<IProps> = ({ isLoading, node, related }) => {
           .map(album => (
             <NodeRelated
               title={
-                <Link to={URLS.NODE_TAG_URL(node.id!, encodeURIComponent(album))}>{album}</Link>
+                <Anchor href={URLS.NODE_TAG_URL(node.id!, encodeURIComponent(album))}>
+                  {album}
+                </Anchor>
               }
               items={related.albums[album]}
               key={album}

src/components/profile/ProfileSidebarMenu/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import styles from './styles.module.scss';
 import { Icon } from '~/components/input/Icon';
-import { Link } from 'react-router-dom';
+import { Anchor } from '~/components/common/Anchor';
 
 interface IProps {
   path: string;
@@ -12,10 +12,10 @@ const ProfileSidebarMenu: FC<IProps> = ({ path }) => {
 
   return (
     <div className={styles.wrap}>
-      <Link className={styles.row} to={`${cleaned}/settings`}>
+      <Anchor className={styles.row} href={`${cleaned}/settings`}>
         <Icon icon="settings" />
         <span>Настройки</span>
-      </Link>
+      </Anchor>
 
       <div className={styles.row}>
         <Icon icon="messages" />