Posted at

[React Router] Property 'history' is missing in type


エラー

Property 'history' is missing in type ...


対処法

シンプルなエラーです。

// 誤

<Route path="/" exact render={() => <TopPage hoge={hoge} />} />
// 正
<Route path="/" exact render={(props) => <TopPage {...props} hoge={hoge} />} />


解説

<Route path="/" exact component={TopPage} />

この書き方の時は、ReactRouterは、React.createElement時に route props (match, location, history) を渡してくれるが、

<Route path="/" exact render={(routeProps) => <TopPage {...routeProps} />} />


// {...hoge} は JSX Spread Attributes で、下と同じ意味
<Route path="/" exact render={(routeProps) => <TopPage history={routeProps.history} location={routeProps.location} history={routeProps.history} />} />

この書き方の時は、route props(match, location, history) を自分で渡さないといけない。


参考

https://reacttraining.com/react-router/web/api/Route/render-func

Instead of having a new React element created for you using the component prop, you can pass in a function to be called when the location matches. The render prop receives all the same route props as the component render prop.