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

Question

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?

Empoverish

Make sure you use redux-simple-router 2.x npm install redux-simple-router@next and history 2.0 if you are using custom history. I needed basename option and got it to work by installing both of these. – Imeldaimelida

Answer 1

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}/>

Empoverish

I was under the impression that the history package was now a dependency of react-router, however I was unable to use hash history from react-router/lib/hashHistory. I comes up with an error 'Uncaught TypeError: createHistory is not a function' on line 30 in react-router/lib/useBasename. Is it still a requirement to have the history package installed? – Microscopy

If the history package couldn't be found you'd get a different error I think, but without seeing some code I can't really help. – Empoverish

The code is the same as yours, I have started with the most basic example I can. If you replace the 'history/lib/createBrowserHistory' with ' react-router/lib/hashHistory' it breaks. If I install my own history package, I am left with 2 copies of the history package in my build. How do I access the history instance that react-router uses? – Microscopy

The history you import from react-router is an object (singleton). The history you import from history/lib is a create/factory function. React router already "creates" the history before it's exported. You can convert the history object from react-router into a create function like ` const createHistoryFunction = () => routerHashHistory`. And if you still have trouble, post some code in a gist really. – Empoverish

You are correct in saying that react-router already 'creates' the history before its exported. I don't understand where the routerHashHistory variable/function comes from in your last comment. The problem I have with your solution is that I end up with 2 copies of the history package in my build (for the browser). I shouldn't need to post code as my code is no different to yours. So my question is, how do you create browser/hash/memory/whatever history with custom query parsing, without duplicating the history package? – Microscopy

What happened to your TypeError then? I was referring to routerHashHistory as the singleton export from react-router. By wrapping it in a create function like that you could probably pass that to react-router-redux and not have to install / reference the history package seperately – Empoverish

The type error was when I tried to use the react-router/lib/hashHistory export directly. After looking into the code, I cannot see how it is possible to create a history using custom query strings without access to the history package. react-router/lib/hashHistory calls ./createRouterHistory, with the history/lib/createHashHistory factory, ./createRouterHistory calls ./useRouterHistory which calls history/lib/useQueries & history/lib/useBasename. There is no export of the history/lib/useBasename or history/lib/useQueries from the react-router package, therefore it doesn't seem possible. – Microscopy

I think it might just be something that was overlooked with the v2 upgrade. They have been trying to make it easier for people to get started with less understanding of the history package. The Webpack tree shaking feature should fix the problem. – Microscopy

This problem has certainly NOT been resolved in the react-router package. I have been having trouble trying to pass createBrowserHistory rather than createHistory to useRouterHistory in order to implement a basename path, and my webpack bundle.js is returning the same "TypeError: createHistory is not a function" error that Tim Fairbrother received. react-router developers seem to be ignoring the issue. – Snowcap