【react-router@3.x→4.x】動かない。。アップデートで困っている人が読む記事(props(history, location, match等)をRouteから渡したい！！)
【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から渡したい！！)
上の画像のようにRouteを通じてpropsやstateを渡す方法です。
結論
です。
Routeに属性としてrender。該当のComponentを返すようにします。 <Route path='/about'render={ 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)