React Router v4 でカスタム Props を子コンポーネントに渡すにはどうすればよいですか?

React Router v4 のカスタム プロパティを使用した Router コンポーネントの拡張

React Router を使用して複数ページの React アプリケーションを構築する場合、多くの場合、カスタム プロパティを子コンポーネントに渡すことが望ましいです。デフォルトでは、子コンポーネントは this.props.route オブジェクトを継承しますが、これには意図したプロパティが常に含まれているとは限りません。

問題: 子コンポーネントの this.props.route が未定義です

この問題は次の可能性があります。子コンポーネントの this.props.route にアクセスすると、unknown が返されます。これは、React Router のデフォルトのレンダリング メソッドがカスタム プロパティの受け渡しをサポートしていないためです。

解決策: レンダー プロップの使用

カスタム プロパティを渡すには、Route コンポーネントのレンダリング プロップを利用します。これには、レンダー プロップ内のコンポーネント定義のインライン化が含まれます:

<code class="javascript"><Route path="/home" render={(props) => <Home test="hi" {...props} />} /></code>

子コンポーネントのカスタム プロップへのアクセス

子コンポーネントで、this.props:

<code class="javascript">console.log(this.props.test); // Outputs "hi"</code>

デフォルトルータープロパティの伝播

レンダープロップを使用する場合、デフォルトルータープロパティ (場所、履歴、一致など) を子コンポーネントに伝播することが重要です。これは、レンダー プロパティに {...props} を含めることによって実現されます:

<code class="javascript"><Route path="/home" render={(props) => <Home test="hi" {...props} />} /></code>

結論

レンダー プロパティを利用することで、React Router のルーター コンポーネントにカスタム プロパティを簡単に渡すことができます。 v4.子コンポーネントの機能を保証するために、デフォルトのルーター プロパティを忘れずに伝播してください。

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