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です。

javascriptreactjsreact-routerreact-router-v4
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