React Routerでオプションのパラメータを使用する方法


オプションのパラメータを使用する場合、URLの一部を動的な値として扱いたい場合に便利です。例えば、ユーザーのプロフィールページを表示する際に、URLにユーザーIDを含めることができます。

React Routerでは、オプションのパラメータを定義するためにコロン(:)を使用します。以下に、オプションのパラメータを使用する方法のいくつかの例を示します。

  1. 単一のオプションのパラメータ:

    <Route path="/users/:userId" component={User} />

    上記の例では、"/users/"の後に任意のユーザーIDを含むURLがマッチします。Userコンポーネントは、this.props.match.params.userIdを使用してユーザーIDにアクセスできます。

  2. 複数のオプションのパラメータ:

    <Route path="/products/:category/:productId" component={Product} />

    上記の例では、"/products/"の後にカテゴリと製品IDを含むURLがマッチします。Productコンポーネントは、this.props.match.params.categorythis.props.match.params.productIdを使用してそれぞれの値にアクセスできます。

  3. オプションのパラメータのデフォルト値:

    <Route path="/products/:category?" component={Products} />

    上記の例では、"/products/"の後にカテゴリがある場合とない場合の両方にマッチします。カテゴリがない場合、カテゴリの値はundefinedになります。Productsコンポーネント内で値の有無をチェックして適切な処理を行うことができます。

以上がReact Routerでオプションのパラメータを使用する方法のいくつかの例です。これらの例を参考にして、自身のアプリケーションに適した方法を選択してください。