React Router v4 でカスタム Props を Router コンポーネントに渡す方法は?

React Router v4 の Router コンポーネントにカスタム プロパティを渡す

React Router で React アプリケーションを構築する場合、多くの場合、カスタム プロパティを渡すことが必要になりますルーティング ツリー内の子コンポーネントに接続します。 React Router v4 では、this.props.route が常に利用できるとは限らないため、ルーターを介して渡される props にアクセスすると課題が生じる可能性があります。

この問題に対処する 1 つのアプローチは、Route コンポーネントの render props を利用することです。 。これにより、個別のコンポーネント ファイルを必要とせずに、コンポーネント定義のインライン化と便利なレンダリングが可能になります。

React Router のドキュメントによると、Route のレンダー プロパティは、コンポーネントのレンダー プロパティと同じルート プロパティを受け取ります。したがって、次のように Route 定義を変更することでカスタム props を渡すことができます:

<Route path="/" exact render={(props) => (<Home test="hi" {...props}/>)} />

子コンポーネント (Home) 内で、カスタム props には this.props.test:

経由でアクセスできます。

this.props.test 

デフォルトのルータープロパティ (場所、履歴、一致など) も子に確実に渡されるように、ルート定義で {...props} スプレッド演算子を使用する必要があることに注意することが重要です。

レンダー プロパティを活用することで、開発者は React Router v4 の子ルーター コンポーネントにカスタム プロパティを簡単に渡すことができ、ルーティング アーキテクチャの柔軟性と保守性が向上します。

以上がReact Router v4 でカスタム Props を Router コンポーネントに渡す方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。