search.replace is not a function

[koraysels]

Replace method is not working .

Expected is for this to work as it does in connected-react-router

 const state = store.getState()
    store.dispatch(
      replace({
        pathname: state.router.location.pathname,
        search: {
          ...state.router.location.search,
          ...action.pushToUrl
        }
      })
    )

but it throws an error

Uncaught TypeError: search.replace is not a function
    at formatUrl (format-url.js?e83e:22)
    at formatWithValidation (utils.js?83fd:5)
    at resolveHref (router.js?7a5c:24)
    at prepareUrlAs (router.js?7a5c:29)

[danielr18]

@koraysels How does the state.router.location object look like, can you log it?

[koraysels]

yeah sure.

like this:

router: {
    location: {
      href: '/post/verhaal',
      pathname: '/post/verhaal',
      search: '',
      hash: ''
    }
  }

and if I add some search params in the url manually from the URL bar in chrome the search parameters get synchronised properly..

router: {
    location: {
      href: '/post/eerste-verhaal?thema=21',
      pathname: '/post/eerste-verhaal',
      search: '?theme=21',
      hash: ''
    }
  }

[koraysels]

So after some digging around. I found that if I use query instead of search. it does kinda work but it keeps refreshing the state by triggering @@router/LOCATION_CHANGE which is very annoying .. i do not understand. is something wrong with my middleware perhaps ?

import {replace} from 'connected-next-router'

const urlSync = (store) => (next) => (action) => {
  if (action.pushToUrl) {
    const state = store.getState()

    store.dispatch(
      replace({
        pathname: state.router.location.pathname,
        query: {
          ...action.pushToUrl
        }
      })
    )
  }

  return next(action)
}

export default urlSync