ホームページ > ウェブフロントエンド > jsチュートリアル > React-Router v4 でカスタム Props を Router コンポーネントに渡す方法は?

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

Mary-Kate Olsen
リリース: 2024-10-29 19:23:02
オリジナル
1007 人が閲覧しました

How to Pass Custom Props to Router Components in React-Router v4?

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート