Parameters in routes

We have prepared most of the work required to add a new user route. Open up the router.js file again. Add the new route, as follows:

<PrivateRoute path="/user/:username" component={props => <User {...props} changeLoginState={this.props.changeLoginState}/>} loggedIn={this.props.loggedIn}/>

The code contains two new elements, as follows:

  • The path that we entered is /user/:username. As you can see, the username is prefixed with a colon, telling React Router to pass the value of it to the underlying component being rendered.
  • The component that we rendered previously was a stateless function that returned either the LoginRegisterForm or the Main component. Neither of these received any parameters or properties from React ...

Get Hands-On Full-Stack Web Development with GraphQL and React now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.