Upgrade to react-router v7

app/eslint.config.js

@@ -72,6 +72,7 @@ export default tseslint.config(
         },
       ],
       "no-console": "warn",
+      "@typescript-eslint/no-deprecated": "warn",
     },
   },
 );

app/package.json

@@ -16,9 +16,8 @@
     "react-bootstrap": "^2.10.5",
     "react-bootstrap-icons": "^1.11.4",
     "react-dom": "^18.3.1",
-    "react-router": "^6.28.0",
+    "react-router": "^7.1.0",
     "react-router-bootstrap": "^0.26.3",
-    "react-router-dom": "^6.28.0",
     "react-syntax-highlighter": "^15.6.1",
     "swagger-ui-react": "=5.18.2",
     "use-interval": "^1.4.0",
@@ -68,7 +67,6 @@
     "@types/react-dom": "^18.3.1",
     "@types/react-router": "^5.1.20",
     "@types/react-router-bootstrap": "^0.26.6",
-    "@types/react-router-dom": "^5.3.3",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/swagger-ui-react": "^4.18.3",
     "@vitejs/plugin-react-swc": "^3.7.1",

app/src/accounts/AccountForm.tsx

@@ -3,7 +3,7 @@ import Button from "react-bootstrap/Button";
 import FormGroup from "react-bootstrap/FormGroup";
 import FormLabel from "react-bootstrap/FormLabel";
 import FormControl from "react-bootstrap/FormControl";
-import { Form } from "react-router-dom";
+import { Form } from "react-router";
 import { BuildingAdd } from "react-bootstrap-icons";
 
 export default function AccountForm() {

app/src/accounts/AccountList.tsx

@@ -2,7 +2,7 @@ import Container from "react-bootstrap/Container";
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
 import React from "react";
-import { useLoaderData, useAsyncValue, Await } from "react-router-dom";
+import { useLoaderData, useAsyncValue, Await } from "react-router";
 import { Account } from "../ApiClient";
 import ListGroup from "react-bootstrap/ListGroup";
 import { LinkContainer } from "react-router-bootstrap";

app/src/accounts/AccountSummary.tsx

@@ -2,7 +2,7 @@ import Breadcrumb from "react-bootstrap/Breadcrumb";
 import Col from "react-bootstrap/Col";
 import Row from "react-bootstrap/Row";
 import ListGroup from "react-bootstrap/ListGroup";
-import { useFetcher, useParams, useRouteLoaderData } from "react-router-dom";
+import { useFetcher, useParams, useRouteLoaderData } from "react-router";
 import {
   ChangeEvent,
   FormEvent,

app/src/accounts/NextSteps/AggregatorTypeSelection.tsx

@@ -13,7 +13,7 @@ import {
   useParams,
   useLoaderData,
   useRevalidator,
-} from "react-router-dom";
+} from "react-router";
 import ApiClient, {
   Aggregator,
   NewAggregator,

app/src/accounts/NextSteps/InlineCollectorCredentials.tsx

@@ -1,5 +1,5 @@
 import { Button, Col, Row } from "react-bootstrap";
-import { useFetcher, useParams, useRevalidator } from "react-router-dom";
+import { useFetcher, useParams, useRevalidator } from "react-router";
 import { ApiToken } from "../../ApiClient";
 import React from "react";
 import useInterval from "use-interval";

app/src/accounts/NextSteps/index.tsx

@@ -1,6 +1,6 @@
 import { Steps } from "primereact/steps";
 import { Button, Card, Col, Row } from "react-bootstrap";
-import { useLoaderData } from "react-router-dom";
+import { useLoaderData } from "react-router";
 import {
   Account,
   Aggregator,

app/src/accounts/index.tsx

@@ -1,4 +1,4 @@
-import { RouteObject, defer, redirect } from "react-router-dom";
+import { RouteObject, redirect } from "react-router";
 import ApiClient, { NewAccount, UpdateAccount } from "../ApiClient";
 import AccountSummary from "./AccountSummary";
 import AccountForm from "./AccountForm";
@@ -16,7 +16,7 @@ export default function accounts(
         path: "",
         element: <AccountList />,
         loader() {
-          return defer({ accounts: apiClient.accounts() });
+          return { accounts: apiClient.accounts() };
         },
         index: true,
       },
@@ -43,9 +43,9 @@ export default function accounts(
         id: "account",
         loader({ params }) {
           const { accountId } = params as { accountId: string };
-          return defer({
+          return {
             account: apiClient.account(accountId),
-          });
+          };
         },
         shouldRevalidate(args) {
           return (
@@ -78,14 +78,14 @@ export default function accounts(
             index: true,
             loader({ params }) {
               const { accountId } = params as { accountId: string };
-              return defer({
+              return {
                 apiTokens: apiClient.accountApiTokens(accountId),
                 tasks: apiClient.accountTasks(accountId),
                 collectorCredentials:
                   apiClient.accountCollectorCredentials(accountId),
                 aggregators: apiClient.accountAggregators(accountId),
                 account: apiClient.account(accountId),
-              });
+              };
             },
           },
           ...children,

app/src/admin/index.tsx

@@ -1,4 +1,4 @@
-import { RouteObject } from "react-router-dom";
+import { RouteObject } from "react-router";
 import ApiClient from "../ApiClient";
 
 export default function admin(

app/src/aggregators/AggregatorDetail.tsx

@@ -1,4 +1,4 @@
-import { Await, useLoaderData, useParams } from "react-router-dom";
+import { Await, useLoaderData, useParams } from "react-router";
 import { Aggregator } from "../ApiClient";
 import { AccountBreadcrumbs } from "../util";
 import { LinkContainer } from "react-router-bootstrap";

app/src/aggregators/AggregatorForm.tsx

@@ -18,7 +18,7 @@ import {
   useNavigate,
   useNavigation,
   useParams,
-} from "react-router-dom";
+} from "react-router";
 import { ApiClientContext } from "../ApiClientContext";
 
 async function submit(

app/src/aggregators/AggregatorList.tsx

@@ -6,7 +6,7 @@ import { AccountBreadcrumbs, WithAccount } from "../util";
 import { CloudUpload } from "react-bootstrap-icons";
 import { Suspense } from "react";
 import { LinkContainer } from "react-router-bootstrap";
-import { Await, useLoaderData } from "react-router-dom";
+import { Await, useLoaderData } from "react-router";
 import { Aggregator } from "../ApiClient";
 import { ListGroup } from "react-bootstrap";
 import D from "../logo/color/svg/small.svg";

app/src/aggregators/DeleteAggregatorButton.tsx

@@ -1,4 +1,4 @@
-import { useFetcher, useNavigation } from "react-router-dom";
+import { useFetcher, useNavigation } from "react-router";
 import React, { useEffect, useState } from "react";
 import { Trash } from "react-bootstrap-icons";
 import { Button, Modal } from "react-bootstrap";

app/src/aggregators/RenameAggregatorButton.tsx

@@ -1,4 +1,4 @@
-import { useFetcher } from "react-router-dom";
+import { useFetcher } from "react-router";
 import React from "react";
 import { Pencil, PencilSquare } from "react-bootstrap-icons";
 import {

app/src/aggregators/RotateBearerTokenButton.tsx

@@ -1,4 +1,4 @@
-import { useFetcher } from "react-router-dom";
+import { useFetcher } from "react-router";
 import React from "react";
 import { ArrowRepeat } from "react-bootstrap-icons";
 import {

app/src/aggregators/index.tsx

@@ -2,7 +2,7 @@ import Aggregators from "./AggregatorList";
 import AggregatorFormPage from "./AggregatorForm";
 import AggregatorDetail from "./AggregatorDetail";
 import ApiClient from "../ApiClient";
-import { RouteObject, defer, redirect } from "react-router-dom";
+import { RouteObject, redirect } from "react-router";
 
 export default function aggregators(apiClient: ApiClient): RouteObject {
   return {
@@ -13,20 +13,20 @@ export default function aggregators(apiClient: ApiClient): RouteObject {
         index: true,
         element: <Aggregators />,
         loader({ params }) {
-          return defer({
+          return {
             aggregators: apiClient.accountAggregators(
               params.accountId as string,
             ),
-          });
+          };
         },
       },
       {
         path: ":aggregatorId",
         element: <AggregatorDetail />,
         loader({ params }) {
-          return defer({
+          return {
             aggregator: apiClient.aggregator(params.aggregatorId as string),
-          });
+          };
         },
 
         async action({ params, request }) {

app/src/api-tokens/ApiTokenList.tsx

@@ -20,7 +20,7 @@ import {
   useFetcher,
   useLoaderData,
   useNavigation,
-} from "react-router-dom";
+} from "react-router";
 import { ApiToken } from "../ApiClient";
 import Table from "react-bootstrap/Table";
 import React from "react";

app/src/api-tokens/index.tsx

@@ -1,4 +1,4 @@
-import { RouteObject, defer } from "react-router-dom";
+import { RouteObject } from "react-router";
 import ApiClient from "../ApiClient";
 import ApiTokens from "./ApiTokenList";
 
@@ -11,11 +11,11 @@ export default function apiTokens(apiClient: ApiClient): RouteObject {
         index: true,
         element: <ApiTokens />,
         loader({ params }) {
-          return defer({
+          return {
             apiTokens: apiClient
               .accountApiTokens(params.accountId as string)
               .then((tokens) => tokens.reverse()),
-          });
+          };
         },
 
         shouldRevalidate(_) {

app/src/collector-credentials/CollectorCredentialForm.tsx

@@ -14,7 +14,7 @@ import {
   Row,
 } from "react-bootstrap";
 import { KeyFill } from "react-bootstrap-icons";
-import { useFetcher } from "react-router-dom";
+import { useFetcher } from "react-router";
 import { formikErrors } from "../ApiClient";
 import { CopyCode } from "../util";