router abstraction to work on both Next.js Apps and React Apps with react-router-dom

hybridRouter.tsx

/* eslint-disable react-hooks/rules-of-hooks */
// 24:33  error  React Hook "useNextRouter" is called conditionally. React Hooks must be called in the exact same order in every component render           react-hooks/rules-of-hooks
// 25:43  error  React Hook "useReactRouterNavigate" is called conditionally. React Hooks must be called in the exact same order in every component render  react-hooks/rules-of-hooks
// 43:35  error  React Hook "useNextPathname" is called conditionally. React Hooks must be called in the exact same order in every component render         react-hooks/rules-of-hooks
// 44:37  error  React Hook "useReactRouterLocation" is called conditionally. React Hooks must be called in the exact same order in every component render  react-hooks/rules-of-hooks

'use client';

import { usePathname as useNextPathname, useRouter as useNextRouter } from 'next/navigation';
import {
  useLocation as useReactRouterLocation,
  useNavigate as useReactRouterNavigate,
} from 'react-router-dom';

type NavigationFunction = (path: string) => void;

function useIsNextJs() {
  return typeof useNextRouter === 'function' && typeof useNextPathname === 'function';
}

export function useNavigateRouter(): NavigationFunction {
  const isNextJs = useIsNextJs();

  const nextRouter = isNextJs ? useNextRouter() : null;
  const reactRouterNavigate = !isNextJs ? useReactRouterNavigate() : null;

  return (path: string) => {
    if (isNextJs && nextRouter) {
      nextRouter.push(path);
      return;
    }

    if (reactRouterNavigate) {
      reactRouterNavigate(path);
      return;
    }
  };
}

export function useLocationPathname(): string {
  const isNextJs = useIsNextJs();

  const nextPathname = isNextJs ? useNextPathname() : '';
  const reactLocation = !isNextJs ? useReactRouterLocation() : null;

  return isNextJs ? nextPathname : reactLocation?.pathname || '';
}

https://twitter.com/jgcmarins/status/1828071642074943673