React Routerでの複数のパラメーター

Frix G:

React 15.0.2とReact Router 2.4.0を使用しています。ルートに複数のパラメーターを渡したいのですが、最良の方法でそれを行う方法がわかりません。

<Route name="User" path="/user" component={UserPage}>   
    <Route name="addTaskModal" path="/user/manage:id" component={ManageTaskPage} />
</Route>

そして欲しいものは次のようなものです:

 <Route name="User" path="/user" component={UserPage}>  
    <Route name="addTaskModal" path="/user/manage:id:type" component={ManageTaskPage} />
</Route>
トーマス・ランダス:

@ alexander-tが述べたように:

path="/user/manage/:id/:type"

それらをオプションのままにしたい場合:

path="/user/manage(/:id)(/:type)"

React Router v4

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

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

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

path="/user/manage/:pathParam1?/:pathParam2?"

すなわち

<Route path="/user/manage/:pathParam1?/:pathParam2?" component={MyPage} />

一方、必須パラメーターはV4でも同じです。

path="/user/manage/:id/:type"

PathParamの値にアクセスするには、次のようにします。

this.props.match.params.pathParam1

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

ラッパー要素のないメソッドで複数のReact要素を返す

分類Dev

React Routerでの複数のパラメーター

分類Dev

react + react-router + fluxでクエリパラメータを処理する方法

分類Dev

react-routerのルートパラメータに安全性を入力できますか?

分類Dev

react-routerでクエリパラメータを保持する

分類Dev

Reactのイベントハンドラーに複数のパラメーターを渡す

分類Dev

React-RouterのようなNextJSURLパラメータ

分類Dev

React-router:URLの単一のパラメーターを変更します

分類Dev

コンポーネントのreact-routerを介して渡されたパラメーターの処理

分類Dev

React Router V4は、URLの特定のパラメーターのみを許可します

分類Dev

React Router:クエリパラメータの一致?

分類Dev

ルートでのReact-routerオプションのパスパラメーター

分類Dev

Reactルーターの複数のパラメーターが機能しない

分類Dev

react-routerレンダリング関数でURLパラメーターにアクセスする

分類Dev

Reactの小道具関数にパラメーターを渡す

分類Dev

React Material UI1.0複数のパラメータを選択onChange

分類Dev

複数のパラメータを使用してReactでリクエストを投稿する

分類Dev

useHistory of React Router Domでパラメータを送信する方法は?

分類Dev

Reactルーターの複数のパラメーター

分類Dev

react-routerで複数のクエリパラメータを連結する

分類Dev

React:コンポーネントコンストラクターは複数のパラメーターを持つことができますか?

分類Dev

react-routerのECMA6スプレッドパラメータ

分類Dev

異なるフラグメントフィールドで同じリレールートクエリを使用する複数のreact-router-relayルート

分類Dev

react-routerのデフォルトのパスパラメータ

分類Dev

React Module: パラメータを受け入れ、複数の値をエクスポートする

分類Dev

複数のパラメータを持つ React 関数

分類Dev

react-routerのURLパラメータの問題

分類Dev

Reactを構成するための複数のパラメーター

分類Dev

React内のsetStateでパラメーターを渡す

Related 関連記事

  1. 1

    ラッパー要素のないメソッドで複数のReact要素を返す

  2. 2

    React Routerでの複数のパラメーター

  3. 3

    react + react-router + fluxでクエリパラメータを処理する方法

  4. 4

    react-routerのルートパラメータに安全性を入力できますか?

  5. 5

    react-routerでクエリパラメータを保持する

  6. 6

    Reactのイベントハンドラーに複数のパラメーターを渡す

  7. 7

    React-RouterのようなNextJSURLパラメータ

  8. 8

    React-router:URLの単一のパラメーターを変更します

  9. 9

    コンポーネントのreact-routerを介して渡されたパラメーターの処理

  10. 10

    React Router V4は、URLの特定のパラメーターのみを許可します

  11. 11

    React Router:クエリパラメータの一致?

  12. 12

    ルートでのReact-routerオプションのパスパラメーター

  13. 13

    Reactルーターの複数のパラメーターが機能しない

  14. 14

    react-routerレンダリング関数でURLパラメーターにアクセスする

  15. 15

    Reactの小道具関数にパラメーターを渡す

  16. 16

    React Material UI1.0複数のパラメータを選択onChange

  17. 17

    複数のパラメータを使用してReactでリクエストを投稿する

  18. 18

    useHistory of React Router Domでパラメータを送信する方法は?

  19. 19

    Reactルーターの複数のパラメーター

  20. 20

    react-routerで複数のクエリパラメータを連結する

  21. 21

    React:コンポーネントコンストラクターは複数のパラメーターを持つことができますか?

  22. 22

    react-routerのECMA6スプレッドパラメータ

  23. 23

    異なるフラグメントフィールドで同じリレールートクエリを使用する複数のreact-router-relayルート

  24. 24

    react-routerのデフォルトのパスパラメータ

  25. 25

    React Module: パラメータを受け入れ、複数の値をエクスポートする

  26. 26

    複数のパラメータを持つ React 関数

  27. 27

    react-routerのURLパラメータの問題

  28. 28

    Reactを構成するための複数のパラメーター

  29. 29

    React内のsetStateでパラメーターを渡す

ホットタグ

アーカイブ