RemixからReact Router v7にアップグレード
先日、Remixを使って作り直した自分のサイトをReact Router v7にアップグレードする。
こちらの公式ドキュメントを参考にした。
https://react-router-docs-ja.techtalk.jp/upgrading/remix
futureフラグを有効化していたので、アップグレード自体は簡単にできた。
remix({
ssr: false,
future: {
v3_fetcherPersist: true,
v3_relativeSplatPath: true,
v3_throwAbortReason: true,
v3_singleFetch: true,
v3_lazyRouteDiscovery: true,
},
}),依存関係の更新
まずは、パッケージ名や依存関係、コンポーネント名が変更になっているので、それを修正する必要がある。下記コマンドで一発更新できた。
npx codemod remix/2/react-router/upgrade
yarn installtsconfig.jsonは更新されなかったので、下記のように修正。
{
"include": [
"env.d.ts", "**/*.ts", "**/*.tsx",
+ ".react-router/types/**/*"
],
"compilerOptions": {
- "types": ["@remix-run/node", "vite/client"],
+ "types": ["@react-router/node", "vite/client"],
/* ... */
+ "rootDirs": [".", "./.react-router/types"]
}
}あとは、React Routerの型情報が.react-router/以下に出力されるので、これを.gitignore追加にする。
.react-router/SPAモードの設定を修正
続いて、SPAモードで動かしていたので、react-router.config.tsを下記の内容で作成。
import { type Config } from '@react-router/dev/config';
export default {
ssr: false,
} satisfies Config;vite.config.tsは下記のように修正。
-declare module '@remix-run/node' {
- interface Future {
- v3_singleFetch: true;
- }
-}
export default defineConfig({
plugins: [
- remix({
- ssr: false,
- future: {
- v3_fetcherPersist: true,
- v3_relativeSplatPath: true,
- v3_throwAbortReason: true,
- v3_singleFetch: true,
- v3_lazyRouteDiscovery: true,
- },
- }),
+ reactRouter(),ファイルベースルーティングの設定
ファイルベースでルーティングを行っていたので、下記の内容で作成。
import { type RouteConfig } from '@react-router/dev/routes';
import { flatRoutes } from '@react-router/fs-routes';
export default flatRoutes() satisfies RouteConfig;@react-router/fs-routesを追加。
yarn add -D @react-router/fs-routes