402

オプションのパスパラメーターを使用してパスを宣言したいので、ページを追加すると、何か特別なことをする（たとえば、データを入力する）：

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

編集＃1：

ここで述べた次の構文に関する解決策はうまくいきませんでした。それは適切なものですか? ドキュメントに存在しますか？

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

私の反応ルーターのバージョンは: 1.0.3

4

8 に答える 8

789

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

React ルーター v1、v2、および v3

バージョン以降1.0.0、オプションのパラメーターを次のように定義します。

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

複数のオプションパラメータの場合:

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

括弧を使用して、先頭のスラッシュ ( )を含む( )route のオプション部分をラップします。公式ドキュメントのRoute Matching Guideページを確認してください。/

注: パラメータは、次の、、または:paramNameまでの URL セグメントに一致します。特にパスとパラメーターの詳細については、こちらをお読みください。/?#

React ルーター v4 以降

React Router v4 は v1-v3 とは根本的に異なり、オプションのパス パラメーターは公式ドキュメントでも明示的に定義されていません。

代わりに、path-to regexpが理解できるpathパラメーターを定義するように指示されます。これにより、繰り返しパターンやワイルドカードなど、パスをより柔軟に定義できます。したがって、パラメータをオプションとして定義するには、末尾に疑問符 ( ) を追加します。?

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

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

複数のオプションパラメータの場合:

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

注: React Router v4 は、互換性がありません(詳細はこちらを参照)。代わりにバージョン v3 以前 (v2 を推奨) を使用してください。

于 2016-02-24T14:28:04.650 に答える
99

検索後にここに到着した React Router v4 ユーザーの場合、a 内のオプションのパラメーターは接尾辞<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} />
于 2016-11-29T17:48:18.360 に答える
12

react-router V5 以降では、複数のパスに以下の構文を使用します

<Route
          exact
          path={[path1, path2]}
          component={component}
        />
于 2020-02-18T08:30:29.390 に答える
1

Sayak が指摘したように、オプションのパラメーターは React Router V6 から削除されました。私が見つけた最も簡単な解決策は、2 つのルートを作成することでした。1 つはパラメーターのない URL 用で、もう 1 つは次のパラメーターを含むものです。

<Route path="/product/:productName/" handler={SomeHandler} />
<Route path="/product/:productName/:urlID?" handler={SomeHandler} />
于 2022-02-07T05:19:49.487 に答える