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>

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

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