Remix の Splat Routes は最も優先順位が低いので注意が必要

どういうこと？

Remix には Splat Routes というルーティング機能があり、その機能を使うと複数のパス ( セグメント ) にマッチするページを実装できます。

以下の api.$.ts のように $ のみセグメントを定義すると、/api/* のような URL にマッチするようになります 👇

import { json } from '@remix-run/node';

export default function loader() {
  return json({ message: "この`loader()`は`/api/*`にマッチします" })
}

しかし、ここで注意なのが Splat Routes の優先順位は必ず最後になるため、似たような機能である Dynamic Segments と併用すると意図した挙動にならないことがあります。

具体例を挙げると、

• $username.profile.ts ← Dynami Routes で定義したページ
• api.$.ts ← Splat Routes で定義したページ

二つのページがあった時に /api/profile へリクエストすると、直感的には api.$.ts にマッチしそうですが、Splat Routes の優先順位は必ず最後になるため、$username.profile.ts にマッチしてしまいます。

そのため、Splat Routes を使う場合は URL のフォールバックとして使い、それ以外の用途では使用しない方が良さそうです。

動作環境

 "dependencies": {
    "@remix-run/node": "^2.8.1",
    "@remix-run/react": "^2.8.1",
    "@remix-run/serve": "^2.8.1",
  },
  "devDependencies": {
    "@remix-run/dev": "^2.8.1",
  },

参考

https://github.com/remix-run/remix/issues/9227