ようやくReact Router v6が正式リリースされましたね。
１年以上のベータ期間では、GitHub上のドキュメントを読むしかありませんでしたが、公式のページもリニューアルされました。
今回は、SPAで一度は悩むであろうルーティング可能なモーダルの実装のアイデアを紹介します。
公式ドキュメントでもパスに対応したモーダルを表示するexampleが紹介されていますが、公式の実装は直接コンテンツにアクセスした場合にはモーダルではないページを表示する実装になっています。 特定のパスにアクセスした際にモーダルを表示したいという場合にはこのexampleは参考になりません。
コンポーネントベースのルーティングとオブジェクトベースのルーティングを組み合わせる
v6では、バンドルサイズが大幅に改善されたのに加えhooksの充実やインターフェースの変更が行われました。
その中で、useRoutesというオブジェクトスタイルでルーティングを定義できるhooksが追加されています。
v5では、恐らくパスがモーダルのパスかどうかをどうにかして判別してハンドリングする必要がありましたが、v6ではuseRoutesとRoutesコンポーネントを組み合わせることでシンプルにルーティング可能なモーダルを実装することができます。
この実装では、特定のパスでモーダルを直接開くことができると同時に、任意のページを表示している際にリンクから任意のモーダルを表示することもできます。
ただし、モーダルを直接開く場合のバックグラウンドのページはルートになります。
