title: react-router (v4) how to go back?
body: <p>Trying to figure out how can I go back to the previous page. I am using <code>[react-router-v4][1]</code></p>
  
  <p>This is the code I have configured in my first landing page:</p>
  
  <pre><code>&lt;Router&gt;
    &lt;div&gt;
      &lt;Link to="/"&gt;&lt;div className="routerStyle"&gt;&lt;Glyphicon glyph="home" /&gt;&lt;/div&gt;&lt;/Link&gt;
      &lt;Route exact path="/" component={Page1}/&gt;
      &lt;Route path="/Page2" component={Page2}/&gt;
      &lt;Route path="/Page3" component={Page3}/&gt;
    &lt;/div&gt;
  &lt;/Router&gt;
  </code></pre>
  
  <p>In order to forward to subsequent pages, I simply do:</p>
  
  <pre><code>this.props.history.push('/Page2');
  </code></pre>
  
  <p>However, how can I go back to previous page? 
  Tried few things like mentioned below but no luck:
  1. <code>this.props.history.goBack();</code></p>
  
  <p>Gives error: </p>
  
  <blockquote>
    <p>TypeError: null is not an object (evaluating 'this.props')</p>
  </blockquote>
  
  <ol start="2">
  <li><code>this.context.router.goBack();</code></li>
  </ol>
  
  <p>Gives error: </p>
  
  <blockquote>
    <p>TypeError: null is not an object (evaluating 'this.context')</p>
  </blockquote>
  
  <ol start="3">
  <li><code>this.props.history.push('/');</code></li>
  </ol>
  
  <p>Gives error: </p>
  
  <blockquote>
    <p>TypeError: null is not an object (evaluating 'this.props')</p>
  </blockquote>
  
  <p>Posting the <code>Page1</code> code here below:</p>
  
  <pre><code>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 (
        &lt;div&gt;
          {/* some component code */}
  
  
          &lt;div className="navigationButtonsLeft"&gt;
            &lt;Button onClick={this.handleBack} bsStyle="success"&gt;&amp;lt; Back&lt;/Button&gt;
          &lt;/div&gt;
          &lt;div className="navigationButtonsRight"&gt;
            &lt;Button onClick={this.handleNext} bsStyle="success"&gt;Next &amp;gt;&lt;/Button&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
      );
    }
  
  
  export default Page1;
  </code></pre>