Remix を React Router v7 にアップグレードした時の備忘録

概要

Remix はv2の時期メジャーバージョンが React Router v7 に統合されました。
この記事では個人開発で使用している Remix を React Router v7 にアップグレードした時の作業内容を備忘録としてまとめます。

進め方

公式サイトに進め方が詳細にまとめられているので、基本的にその手順に則って作業を行いました。

インポート元を変更

React Router に統合されたことにより、パッケージのインポート元を @remix-run ではなく react-router からインポートするように変更する必要があります。
差分としては下記のようになります。

- 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'

差分の詳細

公式サイトに一括でインポート元を変更できるコマンドが用意されているので、そちらを利用するのが手っ取り早くて良いと思います。

npx codemod remix/2/react-router/upgrade

ルーティング

ルーティングは React Router に沿った設定に修正するか、 @react-router/fs-routes というライブラリを追加して今までの Remix 同様ファイルベースのルーティングを使用することが可能です。
ひとまず、最小限の変更でアップグレードしたかったため、今回は @react-router/fs-routes を使用しました。
公式サイトの手順を参考に @react-router/fs-routes をインストール後、下記のような app/routes.ts を作成しました。

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

export default flatRoutes() satisfies RouteConfig

型生成

React Router v7 では型生成の設定を行うことで react-router typegen というコマンドを使用して型を生成することができます。
常に生成する場合は --watch オプションを追加します。
下記のようなコマンドを登録しておくと良いと思います。

package.json

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

型を生成すると各ページに対応する型が生成されるので、下記のような形で使用できます。

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

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

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

関連

• 作業時のPR
• アップグレードガイド