made transitional Anchor component for next/cra

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]);
 };