made transitional Anchor component for next/cra

src/components/flow/FlowSwiperHero/index.tsx

@@ -12,6 +12,7 @@ import { useHistory } from 'react-router';
 import classNames from 'classnames';
 import { IFlowNode } from '~/types';
 import { useWindowSize } from '~/hooks/dom/useWindowSize';
+import { useNavigation } from '~/hooks/navigation/useNavigation';
 
 SwiperCore.use([EffectFade, Lazy, Autoplay, Navigation]);
 
@@ -21,13 +22,13 @@ interface Props {
 
 export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
   const { innerWidth } = useWindowSize();
+  const { push } = useNavigation();
 
   const [controlledSwiper, setControlledSwiper] = useState<SwiperClass | undefined>(undefined);
   const [currentIndex, setCurrentIndex] = useState(heroes.length);
   const preset = useMemo(() => (innerWidth <= 768 ? PRESETS.cover : PRESETS.small_hero), [
     innerWidth,
   ]);
-  const history = useHistory();
 
   const onNext = useCallback(() => {
     controlledSwiper?.slideNext(1);
@@ -63,9 +64,9 @@ export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
 
   const onClick = useCallback(
     (sw: SwiperClass) => {
-      history.push(URLS.NODE_URL(heroes[sw.realIndex]?.id));
+      push(URLS.NODE_URL(heroes[sw.realIndex]?.id));
     },
-    [history, heroes]
+    [push, heroes]
   );
 
   if (!heroes.length) {

src/components/lab/LabBottomPanel/index.tsx

@@ -10,6 +10,7 @@ import { Grid } from '~/components/containers/Grid';
 import { useHistory } from 'react-router';
 import { URLS } from '~/constants/urls';
 import { Placeholder } from '~/components/placeholders/Placeholder';
+import { useNavigation } from '~/hooks/navigation/useNavigation';
 
 type Props = {
   node: INode;
@@ -19,8 +20,8 @@ type Props = {
 };
 
 const LabBottomPanel: FC<Props> = ({ node, hasNewComments, commentCount, isLoading }) => {
-  const history = useHistory();
-  const onClick = useCallback(() => history.push(URLS.NODE_URL(node.id)), [history, node.id]);
+  const { push } = useNavigation();
+  const onClick = useCallback(() => push(URLS.NODE_URL(node.id)), [push, node.id]);
 
   return (
     <Group horizontal className={styles.wrap} onClick={onClick}>

src/components/lab/LabHero/index.tsx

@@ -7,6 +7,7 @@ import { INode } from '~/types';
 import { getPrettyDate } from '~/utils/dom';
 import { URLS } from '~/constants/urls';
 import { useHistory } from 'react-router-dom';
+import { useNavigation } from '~/hooks/navigation/useNavigation';
 
 interface IProps {
   node?: Partial<INode>;
@@ -14,10 +15,10 @@ interface IProps {
 }
 
 const LabHero: FC<IProps> = ({ node, isLoading }) => {
-  const history = useHistory();
+  const { push } = useNavigation();
   const onClick = useCallback(() => {
-    history.push(URLS.NODE_URL(node?.id));
-  }, [history, node]);
+    push(URLS.NODE_URL(node?.id));
+  }, [push, node]);
 
   if (!node || isLoading) {
     return (

src/components/node/NodeRelatedItem/index.tsx

@@ -5,9 +5,9 @@ import { INode } from '~/types';
 import { PRESETS, URLS } from '~/constants/urls';
 import { RouteComponentProps, withRouter } from 'react-router';
 import { getURL, getURLFromString } from '~/utils/dom';
-import { Avatar } from '~/components/common/Avatar';
 import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString';
 import { Square } from '~/components/common/Square';
+import { useNavigation } from '~/hooks/navigation/useNavigation';
 
 type IProps = RouteComponentProps & {
   item: Partial<INode>;
@@ -29,11 +29,12 @@ const getTitleLetters = (title?: string): string => {
     : words[0].substr(0, 2).toUpperCase();
 };
 
-const NodeRelatedItemUnconnected: FC<IProps> = memo(({ item, history }) => {
+const NodeRelatedItemUnconnected: FC<IProps> = memo(({ item }) => {
+  const { push } = useNavigation();
   const [is_loaded, setIsLoaded] = useState(false);
   const [width, setWidth] = useState(0);
   const ref = useRef<HTMLDivElement>(null);
-  const onClick = useCallback(() => history.push(URLS.NODE_URL(item.id)), [item, history]);
+  const onClick = useCallback(() => push(URLS.NODE_URL(item.id)), [item, push]);
 
   const thumb = useMemo(
     () => (item.thumbnail ? getURL({ url: item.thumbnail }, PRESETS.avatar) : ''),

src/hooks/auth/useRestorePasswordRedirect.ts

@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
-import { useHistory } from 'react-router';
 import { useModal } from '~/hooks/modal/useModal';
 import { Dialog } from '~/constants/modal';
+import { useNavigation } from '~/hooks/navigation/useNavigation';
 
 /** redirects to the password redirect modal */
 export const useRestorePasswordRedirect = () => {
-  const history = useHistory();
+  const { push } = useNavigation();
   const { showModal } = useModal();
 
   useEffect(() => {
@@ -15,7 +15,7 @@ export const useRestorePasswordRedirect = () => {
       return;
     }
 
-    history.push('/');
+    push('/');
     showModal(Dialog.RestorePassword, { code: match[1] });
-  }, [showModal, history]);
+  }, [showModal, push]);
 };

src/hooks/navigation/useNavigation.ts

@@ -0,0 +1,22 @@
+import { useCallback } from 'react';
+import { CONFIG } from '~/utils/config';
+import { useRouter } from 'next/router';
+import { useHistory } from 'react-router';
+
+export const useNavigation = () => {
+  const nextRouter = useRouter();
+  const craHistory = useHistory();
+
+  const push = useCallback(
+    (url: string) => {
+      if (CONFIG.isNextEnvironment) {
+        nextRouter.push(url);
+      } else {
+        craHistory.push(url);
+      }
+    },
+    [craHistory, nextRouter]
+  );
+
+  return { push };
+};

src/hooks/node/useGotoNode.ts

@@ -1,10 +1,10 @@
 import { INode } from '~/types';
-import { useHistory } from 'react-router';
 import { useCallback } from 'react';
 import { URLS } from '~/constants/urls';
+import { useNavigation } from '~/hooks/navigation/useNavigation';
 
 // useGotoNode returns fn, that navigates to node
 export const useGotoNode = (id: INode['id']) => {
-  const history = useHistory();
-  return useCallback(() => history.push(URLS.NODE_URL(id)), [history, id]);
+  const { push } = useNavigation();
+  return useCallback(() => push(URLS.NODE_URL(id)), [push, id]);
 };