Trying to figure out how can I go back to the previous page. I am using [react-router-v4][1]
This is the code I have configured in my first landing page:
<Router>
  <div>
    <Link to="/"><div className="routerStyle"><Glyphicon glyph="home" /></div></Link>
    <Route exact path="/" component={Page1}/>
    <Route path="/Page2" component={Page2}/>
    <Route path="/Page3" component={Page3}/>
  </div>
</Router>
In order to forward to subsequent pages, I simply do:
this.props.history.push('/Page2');
However, how can I go back to previous page? 
Tried few things like mentioned below but no luck:
1. this.props.history.goBack();
Gives error:
TypeError: null is not an object (evaluating 'this.props')
- this.context.router.goBack();
Gives error:
TypeError: null is not an object (evaluating 'this.context')
- this.props.history.push('/');
Gives error:
TypeError: null is not an object (evaluating 'this.props')
Posting the Page1 code here below:
import React, {Component} from 'react';
import {Button} from 'react-bootstrap';
class Page1 extends Component {
  constructor(props) {
    super(props);
    this.handleNext = this.handleNext.bind(this);
  }
  handleNext() {
    this.props.history.push('/page2');
  }
  handleBack() {
    this.props.history.push('/');
  }
  /*
   * Main render method of this class
   */
  render() {
    return (
      <div>
        {/* some component code */}
        <div className="navigationButtonsLeft">
          <Button onClick={this.handleBack} bsStyle="success">< Back</Button>
        </div>
        <div className="navigationButtonsRight">
          <Button onClick={this.handleNext} bsStyle="success">Next ></Button>
        </div>
      </div>
    );
  }
export default Page1;
 
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    