React Router から TanStack Router へ徐々に移行する技術

ARANK

!!この記事は情報の提供のみを目的としています．今回紹介する方法はどちらのライブラリにおいても公式の手法としてサポートされていません．この方法を用いたことにより発生したいかなる損害について，私および弊社は責任を負いません．はじめに世間では Next.js や Remix といったフルスタックフレームワークが話題となっていますが，皆さんはどのような環境で React アプリを開発しているでしょうか．Vite などのツールを使ってビルドされた，いわゆる SPA を開発されている方もまだまだ多いのではないでしょうか．私もその一人です．とくに弊社が提供する workhub では各組織の管理画面として Web アプリを提供しており，これは React + Vite の構成となっています．こうした SPA であって，かつ多画面を提供するアプリの場合，一般にルーティングライブラリが利用されます．その中でもメジャーなものの一つが React Router です．workhub でもこれを利用してルーティングを行っていました．しかし，後述する理由から別のルーティングライブラリである TanStack Router への移行を開始しました．一方 workhub には全部で 150 近くのルートが存在するため．一度にすべて…