Naive React Router 7 upgrade (library mode)

Author: nbudin

app/javascript/AppRoot.tsx

@@ -1,5 +1,5 @@
 import { Suspense, useMemo, useState, useEffect, useContext, RefObject, useRef } from 'react';
-import { useLocation, useNavigate, useLoaderData, Outlet, useNavigation } from 'react-router-dom';
+import { useLocation, useNavigate, useLoaderData, Outlet, useNavigation } from 'react-router';
 import { Settings } from 'luxon';
 import { PageLoadingIndicator } from '@neinteractiveliterature/litform';
 

app/javascript/AppRouter.tsx

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { RouteObject, replace, Outlet, LoaderFunction, redirect, useNavigate, useRouteError } from 'react-router-dom';
+import { RouteObject, replace, Outlet, LoaderFunction, redirect, useNavigate, useRouteError } from 'react-router';
 import { ErrorDisplay } from '@neinteractiveliterature/litform';
 
 import FourOhFourPage from './FourOhFourPage';

app/javascript/AppWrapper.tsx

@@ -1,7 +1,7 @@
 import { Suspense, useCallback, useRef, useEffect, ReactNode, useState, useMemo } from 'react';
 import * as React from 'react';
 import { ApolloProvider, DataProxy } from '@apollo/client';
-import { createBrowserRouter, Outlet, RouterProvider } from 'react-router-dom';
+import { createBrowserRouter, Outlet, RouterProvider } from 'react-router';
 import { i18n } from 'i18next';
 import { I18nextProvider } from 'react-i18next';
 import {
@@ -143,13 +143,7 @@ function AppWrapper<P extends JSX.IntrinsicAttributes>(
           },
         ],
         {
-          future: {
-            v7_relativeSplatPath: true,
-            v7_normalizeFormMethod: true,
-            v7_partialHydration: true,
-            v7_skipActionErrorRevalidation: true,
-            v7_fetcherPersist: true,
-          },
+          future: {},
         },
       );
     }, [props, queryPreloadComplete]);
@@ -180,11 +174,7 @@ function AppWrapper<P extends JSX.IntrinsicAttributes>(
       setQueryPreloadComplete(true);
     }, [queryData]);
 
-    return (
-      <React.StrictMode>
-        {router && <RouterProvider router={router} future={{ v7_startTransition: true }} />}
-      </React.StrictMode>
-    );
+    return <React.StrictMode>{router && <RouterProvider router={router} />}</React.StrictMode>;
   }
 
   // eslint-disable-next-line i18next/no-literal-string

app/javascript/Authentication/EditUser.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { BootstrapFormInput, LoadingIndicator, ErrorDisplay } from '@neinteractiveliterature/litform';
 
-import { LoaderFunction, Navigate, useLoaderData } from 'react-router-dom';
+import { LoaderFunction, Navigate, useLoaderData } from 'react-router';
 import PasswordConfirmationInput from './PasswordConfirmationInput';
 import useAsyncFunction from '../useAsyncFunction';
 import AccountFormContent from './AccountFormContent';

app/javascript/Authentication/ResetPassword.tsx

@@ -1,6 +1,6 @@
 import { useState, useMemo, Suspense, useId } from 'react';
 import * as React from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import { LoadingIndicator, ErrorDisplay } from '@neinteractiveliterature/litform';
 

app/javascript/Authentication/SignInForm.tsx

@@ -1,7 +1,7 @@
 import { useState, useContext } from 'react';
 
 import * as React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import { BootstrapFormInput, BootstrapFormCheckbox, ErrorDisplay } from '@neinteractiveliterature/litform';
 

app/javascript/Authentication/useLoginRequired.tsx

@@ -1,5 +1,5 @@
 import { useContext, useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 import AuthenticationModalContext from './AuthenticationModalContext';
 import AppRootContext from '../AppRootContext';

app/javascript/Breadcrumbs/BreadcrumbItem.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Link, To } from 'react-router-dom';
+import { Link, To } from 'react-router';
 
 type BreadcrumbItemRegularProps = {
   active?: boolean;

app/javascript/Breadcrumbs/LeafBreadcrumbItem.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { To } from 'react-router-dom';
+import { To } from 'react-router';
 
 import RouteActivatedBreadcrumbItem from './RouteActivatedBreadcrumbItem';
 

app/javascript/BuiltInFormControls/LiquidInput.tsx

@@ -22,7 +22,7 @@ import AddFileModal from './AddFileModal';
 import { ActiveStorageAttachment, NotificationEventKey } from '../graphqlTypes.generated';
 import { CmsFilesAdminQueryDocument } from '../CmsAdmin/CmsFilesAdmin/queries.generated';
 import { Blob } from '@rails/activestorage';
-import { useFetcher } from 'react-router-dom';
+import { useFetcher } from 'react-router';
 import { NamedRoute } from '../AppRouter';
 
 export type CreateCmsFileModalProps = {