react-router-domでpathのパラメータ渡しと子コンポーネントへのprops渡しを両立させる

やりたいこと

react-routerでpathのパラメータを渡しつつ、子コンポーネントにpropsを渡すことを両立させたい。

環境

• react-router-dom: 4.1.1

やり方

<Switch>
  <Route exact path='/' component={Home} />
  <Route path='/user/:id' render={({match}) => (
    <MyComponent {...props} match={match} />
  )} />
</Switch>

これでOK。MyComponent内でthis.props.match.params.idを受け取れる。
明示的にmatchを渡すところがポイント。

失敗例

<Route path='/user/:id' component={MyComponent} />

子コンポーネントでpropsが受け取れない。

<Route path='/user/:id' render={() => <MyComponent {...props} />} />}/>

子コンポーネントでthis.props.match.params.idがとれない

参考

• https://stackoverflow.com/questions/43152292/how-do-you-access-url-args-in-react-router-dom-4-when-using-route-render-prop-in
• https://stackoverflow.com/questions/43081961/navigate-in-code-with-react-router-dom-4-0