ReactでCurrentPathにアクセスする正しい方法

Question

私はリアクションルータ（v2.4.0）を使用して現在のアプリケーションの場所にアクセスする "反応する"方法を理解しようとしています。などの変更を破る新しい反応し、ルータに先立ち、私は今、それは再び私は私のコンポーネントのコンテキストにルータを注入することができるようだ

this.context.router.getCurrentLocation() 

を使用することができましたが、ルータインスタンス自体は、APIを含んでいません現在の場所やクエリパラメータなどに関連するものを取得してください。論理的な質問が表示されました。「これは正しいのですか？」

私が使用している反応ルータのRouteコンポーネントが、そのルートにマップされているコンポーネントのプロパティにその場所を注入していることがわかりました。そしてそれは素晴らしいです！しかし、私の場合は、Routeにマップされているマスターコンポーネントの内部に深くネストされた複数のコンポーネントレイヤーがあるため、「this.props.locationを実際に必要とするコンポーネントに渡すか、それを作る人間の道がありますか？」

現在のルータのパス、クエリパラメータ、およびそのようなものは、コードに必要な場合があります。 this.props.routerおよび/またはbrowserHistoryオブジェクトを直接操作するはずですが、this.props.locationをどこに必要な場所に伝播するかを見つける必要がありますか、または画像に何か不足していますか？

ありがとうございました！

Answer 1

あなたが取るアプローチについては、アプリケーションの構造に少し依存しますが、this.props.location.queryには、react-router v2 +の特定のRouteコンポーネントのクエリパラメータが含まれます。あなたが一方this.props.location.query.apple

this.props.paramsからthis.props.location.query.fooからbarとorangeを見つけることができる

あなたのルートコンポーネントから、/result?foo=bar&apple=orangeような何かを訪問したインスタンスの場合は、そう、あなたがルートにマッピングする可能性がある一般的な動的パラメータが含まれています/profile/users/:userIDのようなものでは、指定されたルートのユーザIDはthis.props.params.userIDにあります。

Reactコンポーネントと同じように必要な子コンポーネントにこれらを渡すことができますが、それらの子ノードがネストされたルートかどうかを検討したい場合もあります。this.props...ルーター、または親が自分のロジックを処理してからそれらを渡すことができるかどうかを判断します。

公式ドキュメントアプリを構築するためのいくつかのかなり良い例とユースケースを与え、チェックアウトする価値があります：https://github.com/reactjs/react-router/blob/master/docs/Introduction.md