useMatches について

https://remix.run/docs/en/main/hooks/use-matches

詳しくは公式ドキュメントを読むのが一番早いのですが、軽く説明すると

function SomeComponent() {
  const matches = useMatches();

  // ...
}

こんなふうに使うと

[
  { id, pathname, data, params, handle }, // root route
  { id, pathname, data, params, handle }, // layout route
  { id, pathname, data, params, handle }, // child route
  // etc.
];

このように、現在表示されているページのルート情報が取得できます。これを利用して現在表示しているページの url を取得していきます

実践

今回の場合は、https://hoge.com/news/197のようなページで/newsの部分の文字列を取得したいです。

useMatchesを呼び出すと以下のような配列が返ってきます。

[
  {
    id: 'root',
    pathname: '/',
    params: {},
    data: {...},
    handle: undefined
  },
  {
    id: 'routes/news',
    pathname: '/news',
    params: {},
    data: {...},
    handle: {...}
  },
  {
    id: 'routes/news/$newsId',
    pathname: '/news/197',
    params: { newsId: '197' },
    data: {...},
    handle: undefined
  }
]

各ルートでexportされたhandleや、params、loeaderの返り値などが含まれているのがわかります。

今回自分が取得したかったのは/newsの文字列だったので

const matches = useMatches();
const { pathname } = matches[1]; // 2番目の要素の'pathname'プロパティを取得
console.log(pathname); // '/news'

このようにして現在の url のパスを取得しました。

以上。

最後に

公式ドキュメントダイジ。

では

Bye