【react-router@3.x→4.x】動かない。。アップデートで困っている人が読む記事(props(history, location, match等)をRouteから渡したい!!)

【react-router@3.x→4.x】動かない。。アップデートで困っている人が読む記事(props(history, location, match等)をRouteから渡したい!!)

【react-router-dom】4.xになって辛い。。理解したい人のためのreact-router-dom

【react-router-dom】4.xになって辛い。。理解したい人のためのreact-router-dom

以前
【react-router@3.x→4.x】動かない。。アップデートで困っている人が読む記事(how to update react-router3.x vs 4.x)
という記事を書きましたが続編です

【react-router@3.x→4.x】動かない。。アップデートで困っている人が読む記事(props(history, location, match等)をRouteから渡したい!!)

【react-router@3.x→4.x】動かない。。アップデートで困っている人が読む記事(props(history, location, match等)をRouteから渡したい!!)

上の画像のようにRouteを通じてpropsやstateを渡す方法です。

結論
です。
Routeに属性としてrender。該当のComponentを返すようにします。   <Route path=/aboutrender={ props => <About {props} /> } /> のように。 もしstateの値を渡したい!もしくは任意の propsを渡したければ <Route exact path=/ render={ props => <Home title={I am Title} status={Here is my status} myprofile={this.state.myprofile} {props} />}/>   propsを渡す必要がなければ <Route path=’/home’ component={Home} /> といつものように。 ちなみにindex.jsの方はこれです。

追記

【react-router@3.x→4.x】動かない。。アップデートで困っている人が読む記事(how to update react-router3.x vs 4.x)

(Visited 1 times, 1 visits today)