React: Prop Not Displayed in React Component

Question

I am passing a prop in react route component as listed below:

<Route exact 
       path='/' 
       component={HomePage} 
       display_notification={this.display_notification.bind(this)} 
/>

But When I print the props of HomePage I cannot find display_notification.

Please help.

I am using react-router-v4

score 4 · Accepted Answer · answered Jul 25 '17 at 18:24

4

Route does not recompose props for you, it passes internal location related props only. you need to use the render={} API - https://reacttraining.com/react-router/web/api/Route/render-func

so something like

<Route exact 
  path='/' 
  render={() => <HomePage display_notification={this.display_notification} />} />

answered Jul 25 '17 at 18:24

Dimitar Christoff

but if I do that than I cannot access location using props in the component. – sam23 Jul 25 '17 at 18:29
they arrive as arguments to the render func - so `{props => ` – Dimitar Christoff Jul 25 '17 at 18:33
@sam23, you need to wrap your component with withRouter, check this question https://stackoverflow.com/questions/44127739/programatically-routing-based-on-a-condition-with-react-router/44128108#44128108 – Shubham Khatri Jul 25 '17 at 18:33

1 Answers1