コンポーネントをレンダリングするためのルートを設定しました:
<Route exact path="/page/:id" location={this.props.location} key={this.props.location.key} render={({ location }) => (
<PageStart key={this.props.location.key} />
)} />
そして、そのコンポーネント (PageStart) 内には次のものがあります。
this.props.match.params.id
しかし、エラーが発生します:
Cannot read property 'params' of undefined
単に呼び出すときにプロパティを渡すとcomponent={}正常に動作するようですが、レンダリング関数では動作しません。なぜでしょうか?
ベストアンサー1
なぜなら、render一致、履歴など、ルーターによってコンポーネントに渡されるデフォルトのプロパティが渡されていないためです。
次のように書くと:
<PageStart key={this.props.location.key} />
コンポーネントpropsに値がないことを意味します。PageStart
次のように書きます:
render = {props => <PageStart {...props} key={this.props.location.key} /> } />
ここで{...props}すべての値がPageStartコンポーネントに渡されます。