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

Dimitar Christoff · Accepted Answer · 2017-07-25 18:24:51Z

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, 2017 at 18:24

Dimitar Christoff

26.1k8 gold badges53 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

but if I do that than I cannot access location using props in the component.

they arrive as arguments to the render func - so {props => <HomePage foo={props.bar} notification={this.blah} />

@sam23, you need to wrap your component with withRouter, check this question stackoverflow.com/questions/44127739/…