Search code examples
reactjsreact-routerreact-router-redux

How to combine react-router useRouterHistory with redux-simple-router


I'm trying to use react-router 2.0 with redux-simple-router but I can't get it to work with query parsing. This is what I got from the docs:

const appHistory = useRouterHistory({
  parseQueryString: parse,
  stringifyQueryString: stringify
})

However if I pass the history to redux-simple-router like this ...

syncReduxAndRouter(appHistory, store, (state) => state.router)

... I get history.listen is not a function. Using browserHistory from react-router directly seems to be working fine with redux-simple-router. Why is listen() missing from the history and how do I work around this?


Solution

  • The react-router docs have been updated since I posted this:

    import { useRouterHistory } from 'react-router'
    import createBrowserHistory from 'history/lib/createBrowserHistory'
    
    const createAppHistory = useRouterHistory(createBrowserHistory)
    
    const appHistory = createAppHistory({
      parseQueryString: parse,
      stringifyQuery: stringify
    })
    
    <Router history={appHistory}/>