JavaScript by Example

Managing history using withRouter

React Router has an higher-order component called withRouter with which we can pass in the React Router's history, location, and match objects to our React components as props. To use withRouter, you should wrap your App component inside withRouter() as a parameter. Currently, here's how we are exporting the App component at the last line of the App.js file:

export default App;

You should change this line to the following:

export default withRouter(App);

This will supply three props, history, location, and the match object to our App component. For our initial objective, displaying the home component by default, add the following componentWillMount() method to the App class:

  componentWillMount() { if(this.props.location.pathname ...