title: Next.js withRouter not always updating the page
body: <p>I have a problem with my next.js app.  It seems that when the same component gets rendered twice, it does not update the url properly.  </p>
  
  <p>I have a main component wrapper that goes around everything:</p>
  
  <pre><code>import React from "react"
  import "babel-polyfill"
  import root from "window-or-global"
  import { withRouter } from "next/router"
  import commonApi from "./../../common/common"
  import AppLayout from "./../../components/main/AppLayoutWrapper"
  import configureStore from "./../../redux/configureStore"
  import routes from "./../../../server/routes/routes"
  
  const { makeWithRedux } = configureStore
  const { Router } = routes
  const { getRequestAreaInformation } = commonApi
  
  let store = null
  
  const MainWrapper = (Page: React$Node) =&gt; {
    const PageWrapper = class PageWrapper extends React.Component&lt;{}&gt; {
      static async getInitialProps(req: any) {
        return getRequestAreaInformation(req)
      }
      // Required to make the components work on page load, but fragile
      componentDidMount() {
        this.props.actions.urlLocationChanged(this.props.router)
      }
  
      render() {
        this.props.actions.urlLocationChanged(this.props.router)
        if (Page.getInitialProps) {
          Promise.resolve(Page.getInitialProps({ ...this.props })).then(() =&gt; {})
        }
        if (AppLayout.getInitialProps) {
          Promise.resolve(AppLayout.getInitialProps({ ...this.props })).then(() =&gt; {})
        }
  
        return (
          &lt;section className="main-wrapper-jsx"&gt;
            &lt;AppLayout {...this.props}&gt;
              &lt;Page {...this.props} /&gt;
            &lt;/AppLayout&gt;
          &lt;/section&gt;
        )
      }
    }
    return withRouter(makeWithRedux(PageWrapper))
  }
  
  export default MainWrapper
  </code></pre>
  
  <p>The routes file links up to this:</p>
  
  <pre><code>const link = require("next/link")
  const router = require("next/router")
  
  const NextRouter = router.default || router
  const NextLink = link.default || link
  
  const routes = require("next-routes")({
    Router: NextRouter,
    Link: NextLink,
  })
  
  const MediaListView = "MediaListView"
  const AuthView = "auth/AuthView"
  const LibraryView = "LibraryView"
  
  routes
    .add("root", "/", LibraryView)
    .add("home", "/home", LibraryView)
    .add("search", "/search", MediaListView)
    .add("login", "/login", AuthView)
    .add("register", "/register", AuthView)
  
  module.exports = routes
  </code></pre>
  
  <p>Then finally, there's the redux store that implements this action.</p>
  
  <pre><code>import { handleActions, createAction } from "redux-actions"
  import { fromJS, toJS } from "immutable"
  import root from "window-or-global"
  
  const initialState = fromJS({
    asPath: "",
    pathname: "",
    query: {},
    route: "",
  })
  
  const urlLocationChanged = createAction(`${routeParams.URL_LOCATION_CHANGED}`, (url) =&gt; {
    return url
  })
  
  
  const actions = {
    urlLocationChanged,
  }
  
  const routeActions = handleActions(
    {
      URL_LOCATION_CHANGED: (state, {payload}) =&gt; {
        const location = payload
  
        const pathname = decodeURIComponent(location.asPath.slice(1))
        let param = pathname
        if (param &amp;&amp; param.match(/\w+\D/)) {
          param = param.match(/\w+\D/)[0] 
        }
          return state
            .set("location", location)
  
        }
        return state.set("location", location)
      },
    },
    initialState,
  )
  
  export default {
    initialState,
    routeActions,
    actions,
  }
  </code></pre>
  
  <p>All of this should work, but whenever there's two clicks on the same object, let's say someone clicks on <code>login</code> and then clicks on <code>register</code>, nothing happens.</p>