Next.js withRouter not always updating the page - next.js

Question

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.
I have a main component wrapper that goes around everything:
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) => {
const PageWrapper = class PageWrapper extends React.Component<{}> {
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(() => {})
}
if (AppLayout.getInitialProps) {
Promise.resolve(AppLayout.getInitialProps({ ...this.props })).then(() => {})
}
return (
<section className="main-wrapper-jsx">
<AppLayout {...this.props}>
<Page {...this.props} />
</AppLayout>
</section>
)
}
}
return withRouter(makeWithRedux(PageWrapper))
}
export default MainWrapper
The routes file links up to this:
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
Then finally, there's the redux store that implements this action.
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) => {
return url
})
const actions = {
urlLocationChanged,
}
const routeActions = handleActions(
{
URL_LOCATION_CHANGED: (state, {payload}) => {
const location = payload
const pathname = decodeURIComponent(location.asPath.slice(1))
let param = pathname
if (param && 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,
}
All of this should work, but whenever there's two clicks on the same object, let's say someone clicks on login and then clicks on register, nothing happens.