高次成分がwithRouter効果を成分に包まれ、Route内部には、react-router3つのオブジェクトは、history, location, matchコンポーネントに配置されますprops特性。
1 // withRouter実装原理： 2 // 次いで、ルートにラップアセンブリ、および返す 。3 // CONST withRouter =（）=> { 4 // リターン（）=> { 5は、 // <ルートコンポーネント} = {ナビゲーションを返します/ > 6 // } 7 // } 。8 。9 // この簡略化バージョンである 10 CONST withRouter =（成分）=>（）=> <ルートコンポーネントコンポーネント= {} />
上記の原理の実現であり、 react-router-dom それを直接使用して導入構成要素です。
1からインポート'REACT [反応 2インポート」./nav.css' 。3 インポート{ 4 NavLink、 5 withRouter 。6 } "ルータ-DOMが反応し"から 。7 。8 クラス延びReact.Component {ナビゲーション 9 handleClick =（）=> { 10個の // 3のルートオブジェクトは、メソッドを呼び出すことができるのオブジェクトに置かれる 11。 はconsole.log（これは.props）; 12れる } 13で レンダリング（）{ 14 リターン（ 15 <クラス名= {DIV「NAV '}> 16 <クラス名=スパン{'ロゴ'}のonClick = {この .handleClick}>地ならしコミュニティ</ span>の 17 <LI> <NavLinkへ= "/"厳密>ホーム</ NavLink> </ LI> 18 <LI> <NavLinkへ= "/活動">ダイナミック</ NavLink> </ LI> 19 <LI> <NavLinkへ= "/トピック">トピック</ NavLink> </ LI> 20 <LI> <NavLinkへ= "/ログイン">ログイン</ NavLink> </ LI> 21である </ DIV> 22れている ）; 23である } 24 } 25 26れる // 由来withRouter（NAV）関数が実行されている 27エクスポートデフォルト withRouter（NAV）を
だから、withRouter効果は、私たちが何かでない場合ということですRouterが、私たちは、このようなページをクリックするようにページをジャンプすることに依存する必要logoと帰国、あなたは、この時間を使用することができますwithRouterすることができません。
この例では、私がしますspan使用しwithRouterてクリッカブルジャンプLink