title: Next js doesn't update URL
body: <p>I have the following component:</p>
  
  <pre><code>import React, {Component} from "react";
  import fetch from 'isomorphic-unfetch';
  import {Router} from '../routes';
  
  class About extends Component {
    state = {
      results: null,
      postcode: null
    }
  
    handleOnChange = e =&gt; {
      this.setState({
        postcode: e.target.value
      });
    }
  
    handleOnSubmit = e =&gt; {
      e.preventDefault();
        // calling the api passing the postcode
        console.log(this.state.postcode)
      fetch(`http://localhost:3001/${this.state.postcode}`)
        .then(response =&gt; response.json())
        .then(data =&gt; {
            this.setState({
              results: data
            })
        })
        .catch(error =&gt; console.error(error))
  
        Router.pushRoute('/about', {postcode: this.state.postcode})
    }
  
    render() {
      console.log(this.state.results)
     return(
      &lt;form&gt;
        &lt;input name="postcode" onChange={this.handleOnChange} /&gt;
        &lt;button onClick={this.handleOnSubmit}&gt;submit postcode&lt;/button&gt;
      &lt;/form&gt;
     )
    }
  }
  
  About.getInitialProps = async function(context) {
    console.log('context: ', context.query)
    return {
      results: 'data'
    }
  }
  
  export default About;
  </code></pre>
  
  <p>and my routes file like so:</p>
  
  <pre><code>const routes = module.exports = require('next-routes')()
  
  routes
  .add('index')
  .add('about', '/about/:postcode', 'about');
  </code></pre>
  
  <p>however when I submit the form I would expect the URL to be updated with the submitted value like so:</p>
  
  <pre><code>http://localhost:3000/about/ =&gt; http://localhost:3000/about/postcodeValueSubmitted
  </code></pre>
  
  <p>It doesn't throw any error but the URL remains:</p>
  
  <pre><code>http://localhost:3000/about
  </code></pre>
  
  <p>I would need the value to be updated so that I can use 'getInitialProps' to do the server side rendering.</p>