【React】useMatchの使い方

現在参画中のプロジェクトで出てきた、useMatchというHooksについてまとめました。

useMatchはreact-router-domパッケージ内に含まれています。このフックは、現在のURLが指定されたパスと一致するかどうかを確認するために使用されます。

基本的なuseMatchの使い方

import { useMatch } from 'react-router-dom';

const MyComponent = () => {
const match = useMatch('/example');

if (match) {
// URLが'/example'と一致する場合の処理
return <div>This component is matched to '/example' path.</div>;
} else {
// 一致しない場合の処理
return <div>This component is not matched to '/example' path.</div>;
}};

このコードでは、このコンポーネントがレンダリングされた時のURLと指定したパス（'/example'）が一致しているかどうかを判定しています。もし一致している場合useMatchはオブジェクトを返し、一致していない場合はnullを返します。

上記コードのように、一致しているかいないかでJSXを出し分けたり、関数を実行させたりすることができます。

useMatchが返すオブジェクトについて

useMatchは一致していた場合下記を保有するオブジェクトを返します。

オブジェクトキー	説明
path	マッチしたパスの文字列
url	マッチしたURLの文字列
isExact	trueならば、pathとurlが完全に一致します
params	パスパラメータを持つオブジェクト。動的なルートの場合に有用です

Paramsについて

たとえば下記のようにURLの一致を検証したとします。

const match = useMatch('/example/:id');

この時、指定したパスのidに対してどのような値かを取得することができます。下記のようにすることで、アクセスすることができます。

const userId = match.params.id 

指定できるオプションについて

useMatchではpath以外にオプションを設定できます。下記のように書くことで、設定できます。

const match = useMatch({
	path: '/sample/:id',
  caseSensitive: true,
  strict: true,
  exact: true,
});

それぞれのオプションの役割

オプション	説明
path	検証したいパス
caseSensitive	大文字小文字で区別するかどうかを指定します。デフォルトは false で、大文字小文字を区別しません。
strict	パスの末尾スラッシュを厳密に一致させるかどうかを指定。デフォルトは false
exact	パスが完全に一致する場合にのみ一致とするかどうかを指定します。デフォルトは falseで、指定したパターンがURLの一部であれば一致

useMatchを使う際の注意点

不要なレンダリング

useMatchフックは、ルーティングの変更や現在のURLの変更に応じてコンポーネントが再レンダリングされます。useMatchフック内で参照する値が変更されるたびに、コンポーネントが再レンダリングされることに注意してください。