0

I am new to React and encountered the below code which uses React Router: 

<Router>
  <NavLink to="/homepage">Homepage</NavLink>
  <Route path="/homepage" render={props => 
  (<Homepage {...props} pieceOfState={this.state.pieceOfState}/>)
}/>
</Router>

The question is Does props passed into render "render={props =>..." represent router props like with objects match, location and history?

Dickens
  • 895
  • 3
  • 11
  • 25
  • You don't need to pass it on that way if you use for example `withRouter` where you are defining your component in this case `Homepage` component – vaske Sep 19 '19 at 08:33

3 Answers3

1

...props does stand for match, location and history. This syntax is used when you have extra props to pass. Like in this case, this.state.pieceOfState

From the docs:

The render prop function has access to all the same route props (match, location and history) as the component render prop.

You can also individually pass the required props by:

<Route path="/homepage" render={({ match }) => 
  (<Homepage match={match} pieceOfState={this.state.pieceOfState}/>)
Agney
  • 18,522
  • 7
  • 57
  • 75
  • so you mean here "render={props => we are passing router props so that we can access match, history and location inside render method of a route. Is that right? – Dickens Sep 19 '19 at 09:04
  • yes, that's right. It's automatically passed for you in case the [`component`](https://reacttraining.com/react-router/web/api/Route/component) prop in `Route` – Agney Sep 19 '19 at 09:18
0

There are several way to decorate your app with router stuff one could be for in main app.js to have something like

<Router
  history={history}
>
 <App />
</Router>

this way you do not need to pass exact props to component itself.

For more details you can check this one How to push to History in React Router v4?.

vaske
  • 9,332
  • 11
  • 50
  • 69
0

you can do this

<Route path="/" render={() => <Homepage data={passPropsHere} />} />

is side Homepage you can get your props like : 

console.log('your props is here', this.props.data);
Vijay sadhu
  • 500
  • 4
  • 11