Try migrating to react-router v7

.eslintrc.js → .eslintrc.cjs

@@ -1,10 +1,3 @@
-/**
- * This is intended to be a basic starting point for linting in the Blues Stack.
- * It relies on recommended configs out of the box for simplicity, but you can
- * and should modify this configuration to best suit your team's needs.
- */
-
-/** @type {import('eslint').Linter.Config} */
 module.exports = {
   root: true,
   parserOptions: {

app/components/AppLink.tsx

@@ -1,5 +1,5 @@
-import { Link } from "@remix-run/react";
 import { useEffect, type ReactNode, useRef } from "react";
+import { Link } from "react-router";
 
 type LinkProps<T = object> = T & {
   children: ReactNode;

app/components/DictionaryLayout.tsx

@@ -1,5 +1,5 @@
-import { ScrollRestoration, Scripts } from "@remix-run/react";
 import type { PropsWithChildren } from "react";
+import { ScrollRestoration, Scripts } from "react-router";
 
 import { TOTAL_ATOMIC_COMPONENTS_COUNT } from "~/features/dictionary/TOTAL_ATOMIC_COMPONENTS_COUNT";
 

app/components/FigurePopover.tsx

@@ -1,7 +1,7 @@
-import { useFetcher } from "@remix-run/react";
 import clsx from "clsx";
 import { PropsWithChildren, useEffect, createElement, useState } from "react";
 import { createPortal } from "react-dom";
+import { useFetcher } from "react-router";
 
 import { BadgeProps, getBadgeProps } from "~/features/dictionary/badgeFigure";
 import { DictionaryHeadingMeanings } from "~/features/dictionary/DictionaryHeadingMeanings";
@@ -145,7 +145,7 @@ export function FigurePopoverWindow({
 
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-    <div
+    (<div
       ref={setPopperElement}
       style={styles.popper}
       {...attributes.popper}
@@ -234,7 +234,7 @@ export function FigurePopoverWindow({
           />
         </div>
       </div>
-    </div>
+    </div>)
   );
 }
 

app/components/FigureSearchForm.tsx

@@ -1,9 +1,9 @@
 import { KanjisenseFigureImage } from "@prisma/client";
-import { useFetcher, useNavigate } from "@remix-run/react";
 import { clsx } from "clsx";
 import { useCombobox } from "downshift";
 import type { PropsWithChildren } from "react";
 import { useEffect, useId, useMemo, useState } from "react";
+import { useFetcher, useNavigate } from "react-router";
 
 import {
   FigureSearchResult,

app/components/FigureSearchResultsList.tsx

@@ -1,7 +1,7 @@
 import { FigureSearchProperty, FigureSearchPropertyType } from "@prisma/client";
-import { FetcherWithComponents, Link } from "@remix-run/react";
 import cx, { clsx } from "clsx";
 import { useCombobox } from "downshift";
+import { FetcherWithComponents, Link } from "react-router";
 
 import { getBadgeProps } from "~/features/dictionary/badgeFigure";
 import { FigureSearchResult } from "~/features/dictionary/dictionarySearchResults";

app/entry.client.tsx

@@ -4,15 +4,15 @@
  * For more information, see https://remix.run/docs/en/main/file-conventions/entry.client
  */
 
-import { RemixBrowser } from "@remix-run/react";
 import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
+import { HydratedRouter } from "react-router/dom";
 
 startTransition(() => {
   hydrateRoot(
     document,
     <StrictMode>
-      <RemixBrowser />
+      <HydratedRouter />
     </StrictMode>,
   );
 });

app/entry.server.tsx

@@ -6,19 +6,19 @@
 
 import { PassThrough } from "node:stream";
 
-import type { AppLoadContext, EntryContext } from "@remix-run/node";
-import { createReadableStreamFromReadable } from "@remix-run/node";
-import { RemixServer } from "@remix-run/react";
+import { createReadableStreamFromReadable } from "@react-router/node";
 import isbot from "isbot";
 import { renderToPipeableStream } from "react-dom/server";
+import { ServerRouter } from "react-router";
+import type { AppLoadContext, EntryContext } from "react-router";
 
 const ABORT_DELAY = 5_000;
 
 export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext,
+  reactRouterContext: EntryContext,
   // This is ignored so we can keep it in the template for visibility.  Feel
   // free to delete this parameter in your app if you're not using it!
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -29,27 +29,27 @@ export default function handleRequest(
         request,
         responseStatusCode,
         responseHeaders,
-        remixContext,
+        reactRouterContext,
       )
     : handleBrowserRequest(
         request,
         responseStatusCode,
         responseHeaders,
-        remixContext,
+        reactRouterContext,
       );
 }
 
 function handleBotRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext,
+  reactRouterContext: EntryContext,
 ) {
   return new Promise((resolve, reject) => {
     let shellRendered = false;
     const { pipe, abort } = renderToPipeableStream(
-      <RemixServer
-        context={remixContext}
+      <ServerRouter
+        context={reactRouterContext}
         url={request.url}
         abortDelay={ABORT_DELAY}
       />,
@@ -93,13 +93,13 @@ function handleBrowserRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext,
+  reactRouterContext: EntryContext,
 ) {
   return new Promise((resolve, reject) => {
     let shellRendered = false;
     const { pipe, abort } = renderToPipeableStream(
-      <RemixServer
-        context={remixContext}
+      <ServerRouter
+        context={reactRouterContext}
         url={request.url}
         abortDelay={ABORT_DELAY}
       />,

app/features/dictionary/DictEntryReadings.tsx

@@ -1,8 +1,7 @@
 import { SbgyXiaoyun } from "@prisma/client";
-import { LinksFunction } from "@remix-run/node";
-import { useFetcher } from "@remix-run/react";
 import { convert as toRevisedKoreanRomanization } from "hangul-romanization";
 import { Fragment, useRef, useState } from "react";
+import { LinksFunction , useFetcher } from "react-router";
 
 import { OnReadingToTypeToXiaoyuns } from "~/lib/OnReadingToTypeToXiaoyuns";
 import { FigureSinoReadingsLoaderData } from "~/routes/dict.$figureKey.sino";
@@ -318,7 +317,7 @@ function OnReading({
   rare?: boolean;
 }) {
   return (
-    <span key={onReading} className="inline-block">
+    (<span key={onReading} className="inline-block">
       <span className={`block ${rare ? "text-yellow-950/60" : ""}`}>
         {i !== 0 ? "・" : ""}
         {rare ? <span className="text-yellow-950/30">(</span> : null}
@@ -332,7 +331,7 @@ function OnReading({
         </span>
         {rare ? <span className="text-yellow-950/50">)</span> : null}{" "}
       </span>
-    </span>
+    </span>)
   );
 }
 

app/features/dictionary/DictionaryEntryComponentsTree.tsx

@@ -1,5 +1,5 @@
-import { useFetcher } from "@remix-run/react";
 import { useState } from "react";
+import { useFetcher } from "react-router";
 
 import { FigurePopoverBadge } from "~/components/FigurePopover";
 import { getBadgeProps } from "~/features/dictionary/badgeFigure";

app/features/dictionary/FigurePriorityUses.tsx

@@ -1,5 +1,5 @@
-import { useFetcher } from "@remix-run/react";
 import clsx from "clsx";
+import { useFetcher } from "react-router";
 
 import { FigurePopoverBadge } from "~/components/FigurePopover";
 import { getBadgeProps } from "~/features/dictionary/badgeFigure";

app/features/qysInfo/NavLi.tsx

@@ -1,5 +1,5 @@
-import { Link } from "@remix-run/react";
 import type { PropsWithChildren, ReactNode } from "react";
+import { Link } from "react-router";
 
 export function NavLi({
   hash,

app/features/qysInfo/ScrollLink.tsx

@@ -1,5 +1,5 @@
-import { Link } from "@remix-run/react";
 import { PropsWithChildren } from "react";
+import { Link } from "react-router";
 
 export function ScrollLink({
   hash,

app/root.tsx

@@ -1,5 +1,4 @@
-import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node";
-import { json } from "@remix-run/node";
+import type { LinksFunction, LoaderFunctionArgs } from "react-router";
 import {
   Links,
   Meta,
@@ -8,7 +7,7 @@ import {
   ScrollRestoration,
   isRouteErrorResponse,
   useRouteError,
-} from "@remix-run/react";
+} from "react-router";
 
 import { getUser } from "~/session.server";
 import stylesheet from "~/tailwind.css?url";
@@ -20,7 +19,7 @@ export const links: LinksFunction = () => [
 ];
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
-  return json({ user: await getUser(request) });
+  return { user: await getUser(request) };
 };
 
 export default function App() {

app/routes.ts

@@ -0,0 +1,4 @@
+import { type RouteConfig } from "@react-router/dev/routes";
+import { flatRoutes } from "@react-router/fs-routes";
+
+export default flatRoutes() satisfies RouteConfig;

app/routes/_index.tsx

@@ -1,5 +1,5 @@
-import type { MetaFunction } from "@remix-run/node";
 import { ReactNode } from "react";
+import type { MetaFunction } from "react-router";
 
 import {
   BrowseAtomicComponentsLink,

app/routes/about.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unescaped-entities */
-import type { MetaFunction } from "@remix-run/node";
 import { ReactNode } from "react";
+import type { MetaFunction } from "react-router";
 
 import { BrowseSoundComponentsLink } from "~/components/AppLink";
 import DictionaryLayout from "~/components/DictionaryLayout";

app/routes/browse.atomic-components.tsx

@@ -1,13 +1,12 @@
 /* eslint-disable react/no-unescaped-entities */
-import type { LoaderFunction, MetaFunction } from "@remix-run/node";
-import { json } from "@remix-run/node";
+import clsx from "clsx";
+import { createPortal } from "react-dom";
+import type { LoaderFunction, MetaFunction } from "react-router";
 import {
   isRouteErrorResponse,
   useLoaderData,
   useRouteError,
-} from "@remix-run/react";
-import clsx from "clsx";
-import { createPortal } from "react-dom";
+} from "react-router";
 
 import {
   AboutLink,
@@ -39,7 +38,7 @@ type LoaderData = Awaited<ReturnType<typeof getAtomicFigureBadgeFigures>>;
 export const loader: LoaderFunction = async () => {
   const allBadgeFigures = await getAtomicFigureBadgeFigures(prisma);
 
-  return json<LoaderData>(allBadgeFigures);
+  return allBadgeFigures;
 };
 
 export default function FigureDetailsPage() {

app/routes/browse.characters.tsx

@@ -1,15 +1,14 @@
 /* eslint-disable react/no-unescaped-entities */
 import { PrismaClient } from "@prisma/client";
-import type { LoaderFunction, MetaFunction } from "@remix-run/node";
-import { json } from "@remix-run/node";
+import clsx from "clsx";
+import { PropsWithChildren, useState } from "react";
+import { createPortal } from "react-dom";
 import {
   isRouteErrorResponse,
   useLoaderData,
   useRouteError,
-} from "@remix-run/react";
-import clsx from "clsx";
-import { PropsWithChildren, useState } from "react";
-import { createPortal } from "react-dom";
+} from "react-router";
+import type { LoaderFunction, MetaFunction } from "react-router";
 
 import {
   BrowseAtomicComponentsLink,
@@ -71,7 +70,7 @@ async function getAllListCharacterBadgeFigures(prisma: PrismaClient) {
 export const loader: LoaderFunction = async () => {
   const allBadgeFigures = await getAllListCharacterBadgeFigures(prisma);
 
-  return json<LoaderData>(allBadgeFigures);
+  return allBadgeFigures;
 };
 
 export default function BrowseCharactersPage() {

app/routes/browse.compound-components.tsx

@@ -1,15 +1,14 @@
 /* eslint-disable react/no-unescaped-entities */
 import { PrismaClient } from "@prisma/client";
-import type { LoaderFunction } from "@remix-run/node";
-import { json } from "@remix-run/node";
+import clsx from "clsx";
+import { PropsWithChildren, useState } from "react";
+import { createPortal } from "react-dom";
+import type { LoaderFunction } from "react-router";
 import {
   isRouteErrorResponse,
   useLoaderData,
   useRouteError,
-} from "@remix-run/react";
-import clsx from "clsx";
-import { PropsWithChildren, useState } from "react";
-import { createPortal } from "react-dom";
+} from "react-router";
 
 import {
   BrowseAtomicComponentsLink,
@@ -108,7 +107,7 @@ async function getAllListCharacterBadgeFigures(prisma: PrismaClient) {
 export const loader: LoaderFunction = async () => {
   const allBadgeFigures = await getAllListCharacterBadgeFigures(prisma);
 
-  return json<LoaderData>(allBadgeFigures);
+  return allBadgeFigures;
 };
 
 export default function FigureDetailsPage() {

app/routes/browse.sound-components.tsx

@@ -1,13 +1,12 @@
 /* eslint-disable react/no-unescaped-entities */
 import { PrismaClient } from "@prisma/client";
-import type { LoaderFunction } from "@remix-run/node";
-import { json } from "@remix-run/node";
+import { Fragment } from "react";
+import type { LoaderFunction } from "react-router";
 import {
   isRouteErrorResponse,
   useLoaderData,
   useRouteError,
-} from "@remix-run/react";
-import { Fragment } from "react";
+} from "react-router";
 
 import {
   BrowseAtomicComponentsLink,
@@ -136,7 +135,7 @@ async function getAllListCharacterBadgeFigures(prisma: PrismaClient) {
 export const loader: LoaderFunction = async () => {
   const allBadgeFigures = await getAllListCharacterBadgeFigures(prisma);
 
-  return json<LoaderData>(allBadgeFigures);
+  return allBadgeFigures;
 };
 
 export default function FigureDetailsPage() {