web-dev-qa-db-ja.com

オプションのパスパラメータを持つReact Router

私はオプションの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です。

238
tbo

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


React Router v1、v2、v3

バージョン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以降

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を推奨)を使用してください。

557
Chris

検索後にここに到着した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} />
62
John

複数のオプションパラメータの作業構文:

<Route path="/section/(page)?/:page?/(sort)?/:sort?" component={Section} />

現在、URLは次のようになります。

  1. /セクション
  2. / section/page/1
  3. / section/page/1/sort/asc
1
Nebojsa Sapic