☰

オプションのパスパラメータを持つReactルーター 質問する

tag-icon • tag-icon javascript reactjs react-router react-router-v4
オプションのパスパラメータを持つReactルーター 質問する

オプションのパス パラメータを使用してパスを宣言したいので、それを追加すると、ページに何か追加の処理 (データの入力など) が実行されます。

http://localhost/app/path/to/page<= ページをレンダリングするhttp://localhost/app/path/to/page/pathParam<= pathParamに従ってデータを含むページをレンダリングします

私の React ルーターでは、2 つのオプションをサポートするために次のパスがあります (これは簡略化された例です)。

<Router history={history}>    
   <Route path="/path" component={IndexPage}>
      <Route path="to/page" component={MyPage}/>
      <Route path="to/page/:pathParam" component={MyPage}/>
   </Route>    
</Router>

私の質問は、それを1 つのルートで宣言できるかどうかです。2 行目のみを追加すると、パラメーターのないルートは見つかりません。

編集#1:

言及された解決策ここ次の構文は私にはうまくいきませんでした。これは正しい構文でしょうか? ドキュメントに記載されていますか?

<Route path="/product/:productName/?:urlID?" handler={SomeHandler} />

私の react-router のバージョンは 1.0.3 です

ベストアンサー1

あなたが投稿した編集は、React-router の古いバージョン (v0.13) に対して有効であり、もう機能しません。

React ルーター v1、v2、v3

バージョン以降では1.0.0、オプションのパラメータを次のように定義します。

<Route path="to/page(/:pathParam)" component={MyPage} />

複数のオプションパラメータの場合:

<Route path="to/page(/:pathParam1)(/:pathParam2)" component={MyPage} />

先頭のスラッシュ（ ）を含む( )ルートのオプション部分を括弧で囲みます。/ルートマッチングガイド公式ドキュメントのページ。

注: パラメータ:paramNameは、次の/、?、までの URL セグメントに一致します#。パスとパラメータの詳細については、詳細はこちら。

React Router v4以上

React Router v6を確認する ドキュメンテーションのためにOptional Segments。

React Router v4はv1-v3とは根本的に異なり、オプションのパスパラメータは公式文書どちらか。

pathパラメータを定義するように指示されます。正規表現へのパス理解します。これにより、繰り返しパターン、ワイルドカードなど、パスを定義する際の柔軟性が大幅に高まります。したがって、パラメータをオプションとして定義するには、末尾に疑問符 ( ?) を追加します。

したがって、オプションのパラメータを定義するには、次のようにします。

<Route path="/to/page/:pathParam?" component={MyPage} />

複数のオプションパラメータの場合:

<Route path="/to/page/:pathParam1?/:pathParam2?" component={MyPage} />

注意: React Router v4は、（詳細はこちら)。代わりにバージョン v3 以前 (v2 を推奨) を使用してください。

おすすめ記事