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

React-Router v4 の Router コンポーネントにカスタム Props を渡す

React-Router を使用してマルチページ React アプリケーションを操作する場合、カスタム プロパティを渡す個々のページに props を追加すると、コードの柔軟性が向上します。これにより、カスタマイズされた機能とコンポーネント間でのデータ共有が可能になります。

ただし、ルート経由で渡されるプロパティにアクセスするために一般的に使用される this.props.route オブジェクトが unknown を返すという問題が発生しました。これを解決するには、React-Router のドキュメントに従って、Route コンポーネントで render prop を使用することを検討してください。

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

このアプローチでは、render prop 関数は、カスタム プロパティを含むコンポーネント prop と同じすべての prop を受け取ります。テストのような小道具。ホーム コンポーネントのプロパティにアクセスするには、this.props.test を使用します。

さらに、レンダリング プロパティ関数で {...props} を渡すようにしてください。これにより、場所などのデフォルトのルーター プロパティが確実に設定されます。 、履歴、一致もコンポーネントに渡されます。

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