chore: migrate to react-router-v7

.github/workflows/sanity-checks.yml

@@ -13,12 +13,12 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: '21.0.0'
+          node-version: '22.11.0'
 
       - name: Install dependencies
         run: yarn install --immutable

.gitignore

@@ -6,3 +6,5 @@ node_modules
 .env
 .env.local
 .DS_Store
+.react-router
+*.tsbuildinfo

app/entry.client.tsx

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

app/entry.server.tsx

@@ -6,9 +6,9 @@
 
 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 type { AppLoadContext, 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";
 
@@ -18,7 +18,7 @@ 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/layouts/_main.tsx

@@ -1,4 +1,4 @@
-import { Link } from '@remix-run/react';
+import { Link } from 'react-router';
 import { ROUTES } from '~/utils/constants';
 
 type MainLayoutProps = {

app/root.tsx

@@ -1,11 +1,5 @@
-import type { MetaFunction } from '@remix-run/node';
-import {
-  Links,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-} from '@remix-run/react';
+import type { MetaFunction } from 'react-router';
+import { Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router';
 
 import './tailwind.css';
 

app/routes.ts

@@ -1,3 +1,3 @@
-import { flatRoutes } from '@remix-run/fs-routes';
+import { type RouteConfig, index } from '@react-router/dev/routes';
 
-export default flatRoutes();
+export default [index('routes/home.tsx')] satisfies RouteConfig;

app/routes/_index.tsx → app/routes/home.tsx

@@ -5,7 +5,7 @@ export default function Index() {
     <MainLayout>
       <div className="container text-center gradient px-8 py-16 bg-white rounded-lg border border-green-200/80 my-8">
         <div className="drop-shadow-sm max-w-[1024px] m-auto">
-          <h1 className="font-serif font-bold text-3xl lg:text-5xl bg-gradient-to-r inline-block gradien from-purple-400 via-purple-500/95 to-purple-400 bg-clip-text text-transparent">
+          <h1 className="font-serif font-bold text-3xl lg:text-5xl bg-gradient-to-r inline-block gradient from-purple-400 via-purple-500/95 to-purple-400 bg-clip-text text-transparent">
             Welcome to Remix Starter
           </h1>
         </div>

package.json

@@ -4,30 +4,28 @@
   "sideEffects": false,
   "type": "module",
   "scripts": {
-    "build": "remix vite:build",
+    "build": "react-router build",
     "component:new": "hygen component with-prompt",
-    "dev": "remix vite:dev",
+    "dev": "react-router dev",
     "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
-    "start": "remix-serve ./build/server/index.js",
-    "typecheck": "tsc",
+    "start": "react-router-serve ./build/server/index.js",
+    "typecheck": "react-router typegen && tsc",
     "test": "vitest run",
     "test:watch": "vitest run --watch",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@remix-run/node": "^2.15.0",
-    "@remix-run/react": "^2.15.0",
-    "@remix-run/serve": "^2.15.0",
+    "@react-router/node": "^7.0.0",
+    "@react-router/serve": "^7.0.0",
     "clsx": "^2.1.0",
     "isbot": "^4.1.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router": "^7.0.0"
   },
   "devDependencies": {
-    "@remix-run/dev": "^2.15.0",
-    "@remix-run/fs-routes": "^2.15.0",
-    "@remix-run/route-config": "^2.15.0",
+    "@react-router/dev": "^7.0.0",
     "@storybook/addon-essentials": "^7.6.12",
     "@storybook/addon-interactions": "^7.6.12",
     "@storybook/addon-links": "^7.6.12",

vite.config.ts

@@ -1,4 +1,4 @@
-import { vitePlugin as remix } from '@remix-run/dev';
+import { reactRouter } from '@react-router/dev/vite';
 import { defineConfig } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import svgr from 'vite-plugin-svgr';
@@ -18,7 +18,7 @@ export default defineConfig({
       },
     }),
     !isStorybook &&
-      remix({
+      reactRouter({
         ignoredRouteFiles: ['**/.*'],
         future: {
           unstable_optimizeDeps: true,