Memo for Upgrading Remix to React Router v7

Overview

Remix was integrated into React Router v7 with its v2 major release. This article serves as a memo summarizing the steps taken to upgrade a personal project using Remix to React Router v7.

Approach

The upgrade was primarily carried out by following the detailed instructions provided on the official website.

Updating Import Sources

With the integration of Remix into React Router, it is necessary to update import sources from @remix-run to react-router. Below is an example of the required changes:

- import { json, type LoaderFunctionArgs, redirect } from '@remix-run/node'
- import { Links, Meta, Outlet, ScrollRestoration, Scripts, useLoaderData } from '@remix-run/react'
+ import { redirect } from 'react-router'
+ import { Links, Meta, Outlet, ScrollRestoration, Scripts } from 'react-router'

Details of the Differences

Automating the Update:

The official website provides a command to automatically update the import sources. Using this command simplifies the process:

npx codemod remix/2/react-router/upgrade

Routing

For routing, you can either adjust your setup to align with React Router configurations or use the @react-router/fs-routes library to continue leveraging file-based routing, as was standard with Remix.
To minimize changes during this upgrade, I chose to use @react-router/fs-routes. Following the official guide, I installed the library and created an app/routes.ts file as follows:

import { type RouteConfig } from '@react-router/dev/routes'
import { flatRoutes } from '@react-router/fs-routes'

export default flatRoutes() satisfies RouteConfig

Type Generation

React Router v7 supports type generation through the react-router typegen command. To enable continuous type generation, you can add the --watch option. The following commands can be added to package.json for convenience:

"react-router-typegen": "react-router typegen",
"react-router-typegen-watch": "react-router typegen --watch"

Once the types are generated, they can be utilized in loaders and components, as shown below:

import type { Route } from './+types/route'

export async function loader({ params }: Route.LoaderArgs) {
  return {}
}

export default function HomePage() {
  return (
    <div>
    ~
    </div>
  )
}

Related

• Pull Request
• Upgrade Guide