任意のパスパラメータを持つパスを宣言し、それを追加したときにページが何か追加の処理をするようにしたい(例えば、いくつかのデータを埋める)。
http://localhost/app/path/to/page <= ページをレンダリングします。 http://localhost/app/path/to/page/pathParam <= ページをレンダリングします。 pathParamに応じたデータを表示します。
2つのオプションをサポートするために、私のreact routerでは以下のパスを用意しています(これは単純な例です)。
<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番目の行だけを追加した場合、パラメータのないルートは見つかりません。
EDIT#1:
ここ]1で紹介されている以下の構文の解決策は私にはうまくいきませんでしたが、これは適切なものですか?ドキュメントに存在しますか?
<Route path="/product/:productName/?:urlID?" handler={SomeHandler} />
私のreact-routerのバージョンは、1.0.3です。
あなたが投稿した編集は、古いバージョンのReact-router(v0.13)で有効だったので、もう動作しません。
バージョン 1.0.0
以降では、オプションのパラメータを以下のように定義します。
<Route path="to/page(/:pathParam)" component={MyPage} />
で、複数の オプション パラメータを指定します。
<Route path="to/page(/:pathParam1)(/:pathParam2)" component={MyPage} />
ルートのオプション部分(先頭のスラッシュ(/
)を含む)を括るには、括弧 (
`)
を使用します。公式ドキュメントのルートマッチングガイドページをご覧ください。
Note: *:paramName
パラメータは,次の/
,?
,#
までのURLセグメントにマッチします。パスとパラメータについては、詳しくはこちらを参照してください。
React Router v4はv1-v3とは根本的に異なり、オプションのパスパラメータはofficial documentationでも明示的に定義されていません。
代わりに、path-to-regexpが理解できるpath
パラメータを定義するように指示されています。これにより、繰り返しのパターンやワイルドカードなど、パスの定義が非常に柔軟になります。パラメータをオプションとして定義するには、最後にクエスチョンマーク(?
)を付けます。
このように、オプションのパラメータを定義するには、次のようにします。
<Route path="/to/page/:pathParam?" component={MyPage} />
となり、複数の オプション パラメータに対しては
<Route path="/to/page/:pathParam1?/:pathParam2?" component={MyPage} />
Note: *React Router v4は[tag:react-router-relay](Read more here)と互換性がありません。代わりにバージョンv3以前(v2推奨)を使用してください。
React Router v4のユーザーが検索してここにたどり着いた場合、<Route>
のオプションパラメータは、?
という接尾辞で示されます。
関連ドキュメントはこちらです。
https://reacttraining.com/react-router/web/api/Route/path-string
パス:文字列
path-to-regexpが理解する任意の有効なURLパス。
https://www.npmjs.com/package/path-to-regexp#optional
オプション。
パラメータのサフィックスにクエスチョンマーク(?)を付けることで、パラメータをオプションにすることができます。この場合、プレフィックスもオプションになります。
ページ番号を付けても付けなくてもアクセスできるサイトのページ化されたセクションの簡単な例です。
<Route path="/section/:page?" component={Section} />
複数のオプションパラメターのための作業構文。
<Route path="/section/(page)?/:page?/(sort)?/:sort?" component={Section} />
これで、urlは次のようになります。
1./セクション 2./section/page/1 3./セクション/ページ/1/ソート/asc