Remixでindexに複数ルート割り当て

Remixでindexに複数ルート割り当て

indexページを共通ページとして、複数のルート(パス)を割り当てるのにハマった。

下記URLを見ると分かるようにポートフォリオのリンクを開くと、モーダル画面が開いてポートフォリオの詳細画面が開く。このときにポートフォリオごとに固有のURLを割り当てたいといった感じだ。

https://www.greenstudio.jp/portfolio/greenstudio-web

このURLを開くとモーダル画面が開いた状態でindexページが開く。

最初に思いついたのは、_index.tsxをベースとして、_index.portfolio.$name.tsxといった形でルートを設定する方法。しかし、_indexは特別なものとして扱われるらしく、ネストさせることができないようだ。

route.tsxでルートを設定する方法もありそうだが、もっとシンプルにできないかと色々やってみたら下記のような形で上手く動いた。

_.tsx -> indexレイアウト
_._index.tsx -> indexページ
_._portfolio.$name.tsx -> ポートフォリオ各ページ

https://github.com/pontago/greenstudio-web/tree/develop/app/routes

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です