私はオプションのpathパラメータでパスを宣言したいので、それを追加するときに何か特別なことをするためにページを追加します(たとえば、データを入力します)。
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>
私の質問は、それを one routeで宣言できるかどうかです。 2行目だけを追加すると、パラメータなしのルートは見つかりません。
編集#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} />
複数のoptionalパラメーターの場合:
<Route path="to/page(/:pathParam1)(/:pathParam2)" component={MyPage} />
括弧(
)
を使用して、ルートのオプション部分を含むスラッシュ(/
)をラップします。公式ドキュメントの Route Matching Guide ページをご覧ください。
注::paramName
パラメータはURLセグメントと一致します次の/
、?
、または#
まで。パスとパラメーターの詳細については、 詳細はこちら 。
React Router v4はv1-v3と根本的に異なり、オプションのパスパラメータは 公式ドキュメント のいずれかで明示的に定義されていません。
代わりに、 path-to-regexp が理解するpath
パラメーターを定義するように指示されます。これにより、繰り返しパターン、ワイルドカードなど、パスをより柔軟に定義できます。したがって、オプションとしてパラメーターを定義するには、末尾の疑問符(?
)を追加します。
そのため、オプションのパラメーターを定義するには、次のようにします。
<Route path="/to/page/:pathParam?" component={MyPage} />
複数のoptionalパラメーターの場合:
<Route path="/to/page/:pathParam1?/:pathParam2?" component={MyPage} />
注:React Router v4 isincompatiblewith react-router-relay ( 詳細はこちら )代わりにバージョンv3以前(v2を推奨)を使用してください。
検索後にここに到着したReact Router v4ユーザーの場合、<Route>
内のオプションパラメーターは?
サフィックスで示されます。
関連文書は次のとおりです。
https://reacttraining.com/react-router/web/api/Route/path-string
パス:文字列
path-to-regexp が理解できる有効なURLパス。
<Route path="/users/:id" component={User}/>
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は次のようになります。