apply migration steps

.gitignore

@@ -19,3 +19,5 @@ measurements.csv
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+.react-router/

app/components/aggregation-filter.tsx

@@ -1,7 +1,7 @@
 import { Filter } from "lucide-react";
 import { Separator } from "./ui/separator";
 import { Badge } from "./ui/badge";
-import { useSearchParams, useSubmit } from "@remix-run/react";
+import { useSearchParams, useSubmit } from "react-router";
 import * as SelectPrimitive from "@radix-ui/react-select";
 
 import { Select, SelectContent, SelectItem } from "./ui/select";

app/components/daterange-filter.tsx

@@ -13,7 +13,7 @@ import {
 } from "./ui/command";
 import { useEffect, useState } from "react";
 import { Calendar } from "./ui/calendar";
-import { useLoaderData, useSearchParams, useSubmit } from "@remix-run/react";
+import { useLoaderData, useSearchParams, useSubmit } from "react-router";
 import type { loader } from "~/routes/explore+/$deviceId+/_$deviceId";
 import type { DateRange } from "react-day-picker";
 import { PopoverClose } from "@radix-ui/react-popover";

app/components/device-detail/device-detail-box.tsx

@@ -5,7 +5,7 @@ import {
   useNavigation,
   useParams,
   useSearchParams,
-} from "@remix-run/react";
+} from "react-router";
 import Spinner from "../spinner";
 import {
   Accordion,

app/components/device-detail/graph.tsx

@@ -1,4 +1,4 @@
-import { useNavigate, useNavigation, useSearchParams } from "@remix-run/react";
+import { useNavigate, useNavigation, useSearchParams } from "react-router";
 import {
   Chart as ChartJS,
   LineElement,

app/components/device/new/new-device-stepper.tsx

@@ -27,7 +27,7 @@ import {
   BreadcrumbSeparator,
 } from "~/components/ui/breadcrumb";
 import { AdvancedStep } from "./advanced-info";
-import { Form, useSubmit } from "@remix-run/react";
+import { Form, useSubmit } from "react-router";
 
 const generalInfoSchema = z.object({
   name: z

app/components/error-boundary.tsx

@@ -1,9 +1,5 @@
-import {
-  isRouteErrorResponse,
-  useParams,
-  useRouteError,
-} from "@remix-run/react";
-import { type ErrorResponse } from "@remix-run/router";
+import { isRouteErrorResponse, useParams, useRouteError } from "react-router";
+import { type ErrorResponse } from "react-router";
 import { getErrorMessage } from "~/utils/misc";
 
 type StatusHandler = (info: {

app/components/error-message.tsx

@@ -1,6 +1,6 @@
 import { X } from "lucide-react";
 import { Alert, AlertDescription } from "./ui/alert";
-import { useNavigate } from "@remix-run/react";
+import { useNavigate } from "react-router";
 
 export default function ErrorMessage() {
   let navigate = useNavigate();

app/components/header/home/index.tsx

@@ -1,4 +1,4 @@
-import { Link } from "@remix-run/react";
+import { Link } from "react-router";
 
 export default function Home() {
   return (

app/components/header/index.tsx

@@ -1,7 +1,6 @@
 import Home from "./home";
 import NavBar from "./nav-bar";
 import Menu from "./menu";
-// import { useLoaderData } from "@remix-run/react";
 // import Notification from "./notification";
 // import type { loader } from "~/routes/explore.$deviceId._index";
 

app/components/header/menu/index.tsx

@@ -1,10 +1,4 @@
-import {
-  Form,
-  Link,
-  useMatches,
-  useNavigation,
-  useSearchParams,
-} from "@remix-run/react";
+import { Form, Link, useMatches, useNavigation, useSearchParams } from "react-router";
 import {
   DropdownMenu,
   DropdownMenuContent,

app/components/header/nav-bar/filter-options/filter-options.tsx

@@ -1,4 +1,4 @@
-import { useSearchParams, useNavigation } from "@remix-run/react";
+import { useSearchParams, useNavigation } from "react-router";
 import { X } from "lucide-react";
 import { useContext, useEffect, useState } from "react";
 import { Button } from "~/components/ui/button";

app/components/header/nav-bar/filter-options/filter-tags.tsx

@@ -1,4 +1,4 @@
-import { useNavigation, useSearchParams } from "@remix-run/react";
+import { useNavigation, useSearchParams } from "react-router";
 import { Plus, X } from "lucide-react";
 import { useContext, useEffect, useState } from "react";
 import Spinner from "~/components/spinner";

app/components/header/nav-bar/phenomenon-select/phenomenon-select.tsx

@@ -1,9 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import {
-  useLoaderData,
-  useNavigation,
-  useSearchParams,
-} from "@remix-run/react";
+import { useLoaderData, useNavigation, useSearchParams } from "react-router";
 // import { useTranslation } from "react-i18next";
 import type { SensorWikiLabel } from "~/utils/sensor-wiki-helper";
 import { sensorWikiLabel } from "~/utils/sensor-wiki-helper";

app/components/header/nav-bar/sensor-filter.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { CloudSunRain, SunIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
-import { Form } from "@remix-run/react";
+import { Form } from "react-router";
 import { useTranslation } from "react-i18next";
 import { cn } from "~/lib/utils";
 import { sensorWikiLabel } from "~/utils/sensor-wiki-helper";

app/components/header/nav-bar/time-filter/index.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import * as React from "react";
-// import { useSearchParams, useSubmit } from "@remix-run/react";
 import { format } from "date-fns";
 import { de, enGB } from "date-fns/locale";
 import { CalendarIcon } from "@heroicons/react/24/outline";
@@ -13,7 +12,7 @@ import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Form } from "@remix-run/react";
+import { Form } from "react-router";
 import { useToast } from "@/components/ui/use-toast";
 
 import { getUserLocale } from "get-user-locale";

app/components/header/nav-bar/time-filter/time-filter.tsx

@@ -1,15 +1,14 @@
 "use client";
 
 import * as React from "react";
-// import { useSearchParams, useSubmit } from "@remix-run/react";
 import { de, enGB } from "date-fns/locale";
 import { Clock, CalendarSearch, CalendarClock } from "lucide-react";
 import type { DateRange } from "react-day-picker";
 
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Form } from "@remix-run/react";
+import { Form } from "react-router";
 import { useToast } from "@/components/ui/use-toast";
 
 import { getUserLocale } from "get-user-locale";

app/components/header/notification/index.tsx

@@ -4,7 +4,7 @@ import {
   NotificationBell,
 } from "@novu/notification-center";
 import type { IMessage } from "@novu/notification-center";
-import { useLoaderData } from "@remix-run/react";
+import { useLoaderData } from "react-router";
 import { useTheme } from "remix-themes";
 import type { loader } from "~/root";
 

app/components/landing/header/header.tsx

@@ -1,4 +1,4 @@
-import { Link } from "@remix-run/react";
+import { Link } from "react-router";
 import { useState } from "react";
 import { ModeToggle } from "../../mode-toggle";
 import LanguageSelector from "./language-selector";

app/components/landing/header/language-selector.tsx

@@ -1,4 +1,4 @@
-import { useFetcher, useLoaderData } from "@remix-run/react";
+import { useFetcher, useLoaderData } from "react-router";
 import { useState } from "react";
 import i18next from "i18next";
 import type { loader } from "~/root";

app/components/map/filter-visualization.tsx

@@ -1,5 +1,5 @@
 import { X } from "lucide-react";
-import { useLoaderData, useNavigate } from "@remix-run/react";
+import { useLoaderData, useNavigate } from "react-router";
 import type { loader } from "~/routes/explore+/_explore";
 import { Fragment, useEffect } from "react";
 import { DeviceExposureZodEnum, DeviceStatusZodEnum } from "~/schema/enum";

app/components/map/layers/cluster/box-marker.tsx

@@ -1,5 +1,5 @@
 import type { Device } from "~/schema";
-import { useMatches, useNavigate, useSearchParams } from "@remix-run/react";
+import { useMatches, useNavigate, useSearchParams } from "react-router";
 import { AnimatePresence, motion } from "framer-motion";
 import { Box, Rocket } from "lucide-react";
 import { useState } from "react";

app/components/mydevices/edit-device/edit-device-sidebar-nav.tsx

@@ -1,5 +1,5 @@
-import { useLocation } from "@remix-run/react";
-import { Link } from "react-router-dom";
+import { useLocation } from "react-router";
+import { Link } from "react-router";
 import { buttonVariants } from "~/components/ui/button";
 import { cn } from "~/lib/utils";
 

app/components/nav-bar.tsx

@@ -1,4 +1,4 @@
-import { Link, useLocation } from "@remix-run/react";
+import { Link, useLocation } from "react-router";
 import { Button } from "./ui/button";
 
 import { ChevronDownIcon, LogIn, Mailbox, Plus } from "lucide-react";

app/components/search/search-list.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback, useContext } from "react";
 import { useMap } from "react-map-gl";
-import { useMatches, useNavigate, useSearchParams } from "@remix-run/react";
+import { useMatches, useNavigate, useSearchParams } from "react-router";
 
 import SearchListItem from "./search-list-item";
 import { goTo } from "~/lib/search-map-helper";

app/components/sidebar-nav.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { NavLink } from "@remix-run/react";
+import { NavLink } from "react-router";
 import { cn } from "~/lib/utils";
 
 interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {

app/components/sidebar-settings-nav.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { NavLink } from "@remix-run/react";
+import { NavLink } from "react-router";
 import { cn } from "~/lib/utils";
 
 interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {

app/components/stepper/index.tsx

@@ -1,4 +1,4 @@
-import { Link } from "@remix-run/react";
+import { Link } from "react-router";
 import clsx from "clsx";
 
 interface Step {

app/cookies.ts

@@ -1,4 +1,4 @@
-import { createCookie } from "@remix-run/node";
+import { createCookie } from "react-router";
 
 const isProduction = process.env.NODE_ENV === "production";
 

app/entry.client.tsx

@@ -1,4 +1,4 @@
-import { RemixBrowser } from "@remix-run/react";
+import { HydratedRouter } from "react-router/dom";
 import i18next from "i18next";
 import I18nextBrowserLanguageDetector from "i18next-browser-languagedetector";
 import I18NextHttpBackend from "i18next-http-backend";
@@ -34,7 +34,7 @@ const hydrate = async () => {
       document,
       <I18nextProvider i18n={i18next}>
         <StrictMode>
-          <RemixBrowser />
+          <HydratedRouter />
         </StrictMode>
       </I18nextProvider>
     );

app/entry.server.tsx

@@ -1,7 +1,7 @@
 import { PassThrough } from "stream";
-import type { EntryContext } from "@remix-run/node";
-import { createReadableStreamFromReadable } from "@remix-run/node";
-import { RemixServer } from "@remix-run/react";
+import type { EntryContext } from "react-router";
+import { createReadableStreamFromReadable } from "@react-router/node";
+import { ServerRouter } from "react-router";
 import isbot from "isbot";
 import { renderToPipeableStream } from "react-dom/server";
 import { getEnv, init } from "./env.server";
@@ -22,7 +22,7 @@ export default async function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext,
+  reactRouterContext: EntryContext,
 ) {
   const callbackName = isbot(request.headers.get("user-agent"))
     ? "onAllReady"
@@ -35,7 +35,7 @@ export default async function handleRequest(
   // Then we could detect locale from the request
   let lng = await i18next.getLocale(request);
   // And here we detect what namespaces the routes about to render want to use
-  let ns = i18next.getRouteNamespaces(remixContext);
+  let ns = i18next.getRouteNamespaces(reactRouterContext);
 
   // First, we create a new instance of i18next so every request will have a
   // completely unique instance and not share any state.
@@ -58,7 +58,7 @@ export default async function handleRequest(
     // entry.client file
     const { pipe, abort } = renderToPipeableStream(
       <I18nextProvider i18n={instance}>
-        <RemixServer context={remixContext} url={request.url} />
+        <ServerRouter context={reactRouterContext} url={request.url} />
       </I18nextProvider>,
       {
         [callbackName]: () => {

app/root.tsx

@@ -1,13 +1,6 @@
-import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
-import { data } from "@remix-run/node";
-import {
-  Links,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-  useLoaderData,
-} from "@remix-run/react";
+import type { LoaderFunctionArgs, MetaFunction } from "react-router";
+import { data } from "react-router";
+import { Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from "react-router";
 import { getEnv } from "./env.server";
 import { getUser, themeSessionResolver } from "./session.server";
 import tailwindStylesheetUrl from "/app/tailwind.css?url";

app/routes.ts

@@ -1,5 +1,5 @@
-import { type RouteConfig } from "@remix-run/route-config";
-import { remixRoutesOptionAdapter } from "@remix-run/routes-option-adapter";
+import { type RouteConfig } from "@react-router/dev/routes";
+import { remixRoutesOptionAdapter } from "@react-router/remix-routes-option-adapter";
 import { flatRoutes } from "remix-flat-routes";
 
 export default remixRoutesOptionAdapter((defineRoutes) =>

app/routes/_index.tsx

@@ -1,6 +1,6 @@
-import type { LoaderFunctionArgs } from "@remix-run/node";
-import { data } from "@remix-run/node";
-import { Link, useLoaderData } from "@remix-run/react";
+import type { LoaderFunctionArgs } from "react-router";
+import { data } from "react-router";
+import { Link, useLoaderData } from "react-router";
 import { motion } from "framer-motion";
 import Features from "~/components/landing/sections/features";
 import Footer from "~/components/landing/footer";

app/routes/account+/settings.tsx

@@ -1,6 +1,6 @@
-import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
-import { data, redirect } from "@remix-run/node";
-import { Form, useActionData, useLoaderData } from "@remix-run/react";
+import type { ActionFunctionArgs, LoaderFunctionArgs } from "react-router";
+import { data, redirect } from "react-router";
+import { Form, useActionData, useLoaderData } from "react-router";
 import React, { useState } from "react";
 import invariant from "tiny-invariant";
 import {

app/routes/action+/set-language.tsx

@@ -1,5 +1,5 @@
-import type { ActionFunctionArgs } from "@remix-run/node";
-import { data } from "@remix-run/node";
+import type { ActionFunctionArgs } from "react-router";
+import { data } from "react-router";
 import { i18nCookie } from "~/cookies";
 
 /**

app/routes/device+/$deviceId+/dataupload.tsx

@@ -1,6 +1,6 @@
-import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
-import { redirect } from "@remix-run/node";
-import { Form, Link } from "@remix-run/react";
+import type { ActionFunctionArgs, LoaderFunctionArgs } from "react-router";
+import { redirect } from "react-router";
+import { Form, Link } from "react-router";
 import { useState } from "react";
 import { getUserId } from "~/session.server";
 import { ArrowLeft, Upload } from "lucide-react";

app/routes/device+/$deviceId+/edit+/_edit.tsx

@@ -1,6 +1,6 @@
-import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
-import { redirect } from "@remix-run/node";
-import { Link, Outlet, useParams } from "@remix-run/react";
+import type { ActionFunctionArgs, LoaderFunctionArgs } from "react-router";
+import { redirect } from "react-router";
+import { Link, Outlet, useParams } from "react-router";
 import { useState } from "react";
 import { getUserId } from "~/session.server";
 

app/routes/device+/$deviceId+/edit+/general.tsx

@@ -1,11 +1,6 @@
-import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
-import { data, redirect } from "@remix-run/node";
-import {
-  Form,
-  useActionData,
-  useLoaderData,
-  useOutletContext,
-} from "@remix-run/react";
+import type { ActionFunctionArgs, LoaderFunctionArgs } from "react-router";
+import { data, redirect } from "react-router";
+import { Form, useActionData, useLoaderData, useOutletContext } from "react-router";
 import { Save } from "lucide-react";
 import React, { useState } from "react";
 import { typedjson } from "remix-typedjson";