質問

私は、オプションのパスパラメータを持つパスを宣言したいのですが、それゆえ、私がそれを追加したときに、ページが何か特別なことをする（例えば、いくつかのデータを埋める）ようにしたいのです。

http://localhost/app/path/to/page <= ページをレンダリングする http://localhost/app/path/to/page/pathParam <= レンダリングページに pathParamに従った何らかのデータ

私のリアクトルーターでは、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行目だけを追加すると、パラメータなしのルートが見つかりません。

EDIT#1:

解決策に言及 ここで について、以下の構文でうまくいきませんでしたが、これは適切なものでしょうか？ドキュメントに記載されているのでしょうか？

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

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

解決方法を教えてください。

投稿された編集は、古いバージョンのReact-router（v0.13）に対して有効であり、もう動作しません。

React Router 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 v4 は v1-v3 と根本的に異なり、オプションのパス・パラメータは 公式ドキュメント のどちらかです。

代わりに path パラメータは パスから正規表現へ を理解します。これにより、繰り返しのパターンやワイルドカードなど、パスの定義をより柔軟に行えるようになります。つまり、あるパラメータをオプションとして定義するには、末尾にクエスチョンマーク ( ? ).

このように、オプションのパラメータを定義する場合は、次のようにします。

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

で、複数の オプション パラメータを指定します。

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

注 React Router v4 は 非互換 と react-router-relay ( 続きはこちら ). 代わりにバージョン v3 以前（v2 を推奨）を使用してください。