Complete React Router v6 to TanStack Router migration with code-based routing

src/frontend/lib/functions/Navigation.tsx

@@ -1,9 +1,11 @@
-import type { NavigateFunction } from 'react-router-dom';
 import { ModelInformationDict } from '../enums/ModelInformation';
 import type { ModelType } from '../enums/ModelType';
 import { apiUrl } from './Api';
 import { cancelEvent } from './Events';
 
+// NavigateFunction type compatible with both React Router and TanStack Router
+export type NavigateFunction = (to: string | number, options?: any) => void;
+
 export const getBaseUrl = (): string =>
   (window as any).INVENTREE_SETTINGS?.base_url || 'web';
 

src/frontend/lib/functions/navigation.ts

@@ -0,0 +1,14 @@
+/**
+ * Navigation utilities for TanStack Router
+ * Provides compatibility layer between React Router v6 and TanStack Router
+ */
+
+// Export types and functions from custom hooks
+export type { NavigateFunction, NavigateOptions } from '../hooks/UseNavigate';
+export { useNavigate } from '../hooks/UseNavigate';
+export { useSearchParams } from '../hooks/UseSearchParams';
+
+/**
+ * Type for Link 'to' prop
+ */
+export type To = string;

src/frontend/lib/hooks/UseNavigate.tsx

@@ -0,0 +1,40 @@
+/**
+ * Custom hook that provides React Router v6-like useNavigate behavior
+ * This makes migration from React Router to TanStack Router easier
+ */
+
+import { useNavigate as useTanstackNavigate } from '@tanstack/react-router';
+import { useCallback } from 'react';
+
+export type NavigateOptions = {
+  replace?: boolean;
+  state?: any;
+};
+
+export type NavigateFunction = (
+  to: string | number,
+  options?: NavigateOptions
+) => void;
+
+/**
+ * Hook that returns a navigate function compatible with React Router v6
+ */
+export function useNavigate(): NavigateFunction {
+  const tanstackNavigate = useTanstackNavigate();
+
+  return useCallback(
+    ((to: string | number, options?: NavigateOptions) => {
+      if (typeof to === 'number') {
+        window.history.go(to);
+        return;
+      }
+
+      tanstackNavigate({
+        to: to as any,
+        replace: options?.replace,
+        state: options?.state
+      } as any);
+    }) as NavigateFunction,
+    [tanstackNavigate]
+  );
+}

src/frontend/lib/hooks/UseSearchParams.tsx

@@ -0,0 +1,39 @@
+/**
+ * Custom hook that provides React Router v6-like useSearchParams behavior
+ * This makes migration from React Router to TanStack Router easier
+ */
+
+import { useNavigate as useTanstackNavigate, useSearch } from '@tanstack/react-router';
+import { useCallback, useMemo } from 'react';
+
+/**
+ * Hook that returns search params compatible with React Router v6
+ * Returns [URLSearchParams, setSearchParams] tuple
+ */
+export function useSearchParams(): [URLSearchParams, (params: Record<string, any>) => void] {
+  const search = useSearch({ strict: false }) as Record<string, any>;
+  const navigate = useTanstackNavigate();
+
+  const searchParams = useMemo(() => {
+    const params = new URLSearchParams();
+    if (search) {
+      Object.entries(search).forEach(([key, value]) => {
+        if (value !== undefined && value !== null) {
+          params.set(key, String(value));
+        }
+      });
+    }
+    return params;
+  }, [search]);
+
+  const setSearchParams = useCallback(
+    (params: Record<string, any>) => {
+      navigate({
+        search: params as any
+      } as any);
+    },
+    [navigate]
+  );
+
+  return [searchParams, setSearchParams];
+}

src/frontend/lib/types/Plugins.tsx

@@ -2,7 +2,7 @@ import type { I18n } from '@lingui/core';
 import type { MantineColorScheme, MantineTheme } from '@mantine/core';
 import type { QueryClient } from '@tanstack/react-query';
 import type { AxiosInstance } from 'axios';
-import type { NavigateFunction } from 'react-router-dom';
+import type { NavigateFunction } from '../functions/Navigation';
 import type { ModelDict } from '../enums/ModelInformation';
 import type { ModelType } from '../enums/ModelType';
 import type {

src/frontend/lib/types/Tables.tsx

@@ -4,10 +4,13 @@ import type {
   DataTableRowExpansionProps
 } from 'mantine-datatable';
 import type { ReactNode } from 'react';
-import type { NavigateFunction, SetURLSearchParams } from 'react-router-dom';
 import type { ModelType } from '../enums/ModelType';
 import type { FilterSetState, TableFilter } from './Filters';
 import type { ApiFormFieldType } from './Forms';
+import type { NavigateFunction } from '../functions/navigation';
+
+// Type for setting search params - compatible with React Router v6 and our wrapper
+type SetURLSearchParams = (params: Record<string, any>) => void;
 
 /*
  * Type definition for representing the state of a table:

src/frontend/package.json

@@ -75,6 +75,8 @@
         "@sentry/react": "^10.7.0",
         "@tabler/icons-react": "^3.17.0",
         "@tanstack/react-query": "^5.56.2",
+        "@tanstack/react-router": "^1.150.0",
+        "@tanstack/router-devtools": "^1.150.0",
         "@uiw/codemirror-theme-vscode": "4.25.1",
         "@uiw/react-codemirror": "4.25.1",
         "@uiw/react-split": "^5.9.3",

src/frontend/src/components/barcodes/BarcodeScanDialog.tsx

@@ -7,8 +7,9 @@ import { t } from '@lingui/core/macro';
 import { Box, Divider, Modal } from '@mantine/core';
 import { hideNotification, showNotification } from '@mantine/notifications';
 import { useCallback, useState } from 'react';
-import { type NavigateFunction, useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 import { api } from '../../App';
+import type { NavigateFunction } from '@lib/functions/navigation';
 import { extractErrorMessage } from '../../functions/api';
 import { useUserState } from '../../states/UserState';
 import { StylishText } from '../items/StylishText';

src/frontend/src/components/calendar/OrderCalendar.tsx

@@ -19,7 +19,7 @@ import {
 } from '@tabler/icons-react';
 import dayjs from 'dayjs';
 import { useCallback, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 import { api } from '../../App';
 import useCalendar from '../../hooks/UseCalendar';
 import { useUserState } from '../../states/UserState';

src/frontend/src/components/dashboard/widgets/QueryCountDashboardWidget.tsx

@@ -2,7 +2,7 @@ import { ActionIcon, Anchor, Group, Loader } from '@mantine/core';
 import { IconExclamationCircle } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import { type ReactNode, useCallback, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { ModelInformationDict } from '@lib/enums/ModelInformation';
 import type { ModelType } from '@lib/enums/ModelType';

src/frontend/src/components/details/Details.tsx

@@ -15,7 +15,7 @@ import {
 import { useQuery } from '@tanstack/react-query';
 import { getValueAtPath } from 'mantine-datatable';
 import { useCallback, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { ProgressBar } from '@lib/components/ProgressBar';
 import { YesNoButton } from '@lib/components/YesNoButton';

src/frontend/src/components/errors/GenericErrorPage.tsx

@@ -11,7 +11,7 @@ import {
   Text
 } from '@mantine/core';
 import { IconArrowBack, IconExclamationCircle } from '@tabler/icons-react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { LanguageContext } from '../../contexts/LanguageContext';
 

src/frontend/src/components/forms/ApiForm.tsx

@@ -20,7 +20,8 @@ import {
   type SubmitHandler,
   useForm
 } from 'react-hook-form';
-import { type NavigateFunction, useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
+import type { NavigateFunction } from '@lib/functions/navigation';
 
 import { isTrue } from '@lib/functions/Conversion';
 import { getDetailUrl } from '@lib/functions/Navigation';

src/frontend/src/components/forms/AuthenticationForm.tsx

@@ -19,7 +19,8 @@ import { useForm } from '@mantine/form';
 import { useDisclosure } from '@mantine/hooks';
 import { showNotification } from '@mantine/notifications';
 import { useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from '@tanstack/react-router';
+import { useNavigate } from '@lib/functions/navigation';
 import { useShallow } from 'zustand/react/shallow';
 import { api } from '../../App';
 import {

src/frontend/src/components/items/InfoItem.tsx

@@ -1,6 +1,7 @@
 import { Trans } from '@lingui/react/macro';
 import { Code, Flex, Group, Text } from '@mantine/core';
-import { Link, type To } from 'react-router-dom';
+import { Link } from '@tanstack/react-router';
+import type { To } from '@lib/functions/navigation';
 
 import { YesNoButton } from '@lib/components/YesNoButton';
 import { DetailDrawerLink } from '../nav/DetailDrawer';

src/frontend/src/components/items/InvenTreeLogo.tsx

@@ -1,19 +1,19 @@
 import { t } from '@lingui/core/macro';
 import { ActionIcon } from '@mantine/core';
 import { forwardRef } from 'react';
-import { NavLink } from 'react-router-dom';
+import { Link } from '@tanstack/react-router';
 
 import InvenTreeIcon from './inventree.svg';
 
 export const InvenTreeLogoHomeButton = forwardRef<HTMLDivElement>(
   (props, ref) => {
     return (
       <div ref={ref} {...props}>
-        <NavLink to={'/'}>
+        <Link to={'/' as any}>
           <ActionIcon size={28} variant='transparent'>
             <InvenTreeLogo />
           </ActionIcon>
-        </NavLink>
+        </Link>
       </div>
     );
   }

src/frontend/src/components/items/MenuLinks.tsx

@@ -9,7 +9,7 @@ import {
   UnstyledButton
 } from '@mantine/core';
 import { type JSX, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { navigateToLink } from '@lib/functions/Navigation';
 import type { InvenTreeIconType } from '@lib/types/Icons';

src/frontend/src/components/modals/QrModal.tsx

@@ -1,6 +1,6 @@
 import {} from '@mantine/core';
 import type { ContextModalProps } from '@mantine/modals';
-import type { NavigateFunction } from 'react-router-dom';
+import type { NavigateFunction } from '@lib/functions/navigation';
 import { ScanInputHandler } from '../barcodes/BarcodeScanDialog';
 
 export function QrModal({

src/frontend/src/components/nav/BreadcrumbList.tsx

@@ -8,7 +8,7 @@ import {
 } from '@mantine/core';
 import { IconMenu2 } from '@tabler/icons-react';
 import { useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { identifierString } from '@lib/functions/Conversion';
 import { getBaseUrl, navigateToLink } from '@lib/functions/Navigation';

src/frontend/src/components/nav/DetailDrawer.tsx

@@ -1,8 +1,8 @@
 import { ActionIcon, Divider, Drawer, Group, Stack, Text } from '@mantine/core';
 import { IconChevronLeft } from '@tabler/icons-react';
 import { useCallback, useMemo } from 'react';
-import { Link, Route, Routes, useNavigate, useParams } from 'react-router-dom';
-import type { To } from 'react-router-dom';
+import { Link, useNavigate, useParams } from '@tanstack/react-router';
+import type { To } from '@lib/functions/navigation';
 
 import type { UiSizeType } from '@lib/types/Core';
 import { useShallow } from 'zustand/react/shallow';
@@ -33,7 +33,8 @@ function DetailDrawerComponent({
   renderContent
 }: Readonly<DrawerProps>) {
   const navigate = useNavigate();
-  const { id } = useParams();
+  const params = useParams({ strict: false }) as any;
+  const id = params?.id;
 
   const content = renderContent(id);
   const opened = useMemo(() => !!id && !!content, [id, content]);
@@ -46,7 +47,7 @@ function DetailDrawerComponent({
     <Drawer
       opened={opened}
       onClose={() => {
-        navigate('../');
+        navigate({ to: '../' } as any);
         addDetailDrawer(false);
       }}
       position={position}
@@ -60,7 +61,7 @@ function DetailDrawerComponent({
             <ActionIcon
               variant='outline'
               onClick={() => {
-                navigate(-1);
+                window.history.go(-1);
                 addDetailDrawer(-1);
               }}
             >
@@ -80,11 +81,7 @@ function DetailDrawerComponent({
 }
 
 export function DetailDrawer(props: Readonly<DrawerProps>) {
-  return (
-    <Routes>
-      <Route path=':id?/' element={<DetailDrawerComponent {...props} />} />
-    </Routes>
-  );
+  return <DetailDrawerComponent {...props} />;
 }
 
 export function DetailDrawerLink({

src/frontend/src/components/nav/Header.tsx

@@ -16,7 +16,8 @@ import {
 import { IconBell, IconSearch } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import { type ReactNode, useEffect, useMemo, useState } from 'react';
-import { useMatch, useNavigate } from 'react-router-dom';
+import { useLocation } from '@tanstack/react-router';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { apiUrl } from '@lib/functions/Api';
@@ -207,8 +208,12 @@ export function Header() {
 function NavTabs() {
   const user = useUserState();
   const navigate = useNavigate();
-  const match = useMatch(':tabName/*');
-  const tabValue = match?.params.tabName;
+  const location = useLocation();
+
+  // Extract the first path segment as tabName
+  const pathSegments = location.pathname.split('/').filter(Boolean);
+  const tabValue = pathSegments[0] || undefined;
+
   const navTabs = getNavTabs(user);
   const userSettings = useUserSettingsState();
 

src/frontend/src/components/nav/Layout.tsx

@@ -7,7 +7,8 @@ import {
 } from '@mantine/spotlight';
 import { IconSearch } from '@tabler/icons-react';
 import { type JSX, useEffect, useMemo, useState } from 'react';
-import { Navigate, Outlet, useLocation, useNavigate } from 'react-router-dom';
+import { Outlet, Navigate, useLocation } from '@tanstack/react-router';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { identifierString } from '@lib/functions/Conversion';
 import { ApiEndpoints, apiUrl } from '@lib/index';
@@ -40,10 +41,12 @@ export const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
       <Navigate
         to='/logged-in'
         state={{
-          redirectUrl: location.pathname,
-          queryParams: location.search,
-          anchor: location.hash
-        }}
+          redirect: {
+            redirectUrl: location.pathname,
+            queryParams: location.search,
+            anchor: location.hash
+          }
+        } as any}
       />
     );
   }

src/frontend/src/components/nav/MainMenu.tsx

@@ -17,7 +17,8 @@ import {
   IconUserBolt,
   IconUserCog
 } from '@tabler/icons-react';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link } from '@tanstack/react-router';
+import { useNavigate } from '@lib/functions/navigation';
 import { useShallow } from 'zustand/react/shallow';
 import { aboutInvenTree } from '../../defaults/links';
 import { doLogout } from '../../functions/auth';

src/frontend/src/components/nav/NavigationTree.tsx

@@ -21,7 +21,7 @@ import {
 } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import { useCallback, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import type { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import type { ModelType } from '@lib/enums/ModelType';

src/frontend/src/components/nav/NotificationDrawer.tsx

@@ -21,7 +21,7 @@ import {
 } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import { useCallback, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from '@lib/functions/navigation';
 
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelInformationDict } from '@lib/enums/ModelInformation';