7

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?

Jeremy
  • 1
  • 77
  • 324
  • 346
Thijs Koerselman
  • 16,219
  • 15
  • 62
  • 89
  • 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. – aarosil Jan 22 '16 at 21:15

1 Answers1

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}/>
Thijs Koerselman
  • 16,219
  • 15
  • 62
  • 89
  • 1
    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? – Tim Fairbrother Feb 26 '16 at 01:04
  • 1
    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. – Thijs Koerselman Feb 27 '16 at 08:52
  • 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? – Tim Fairbrother Feb 28 '16 at 00:33
  • 2
    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. – Thijs Koerselman Feb 28 '16 at 10:12
  • 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? – Tim Fairbrother Feb 28 '16 at 23:40
  • 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 – Thijs Koerselman Feb 29 '16 at 15:08
  • 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. – Tim Fairbrother Feb 29 '16 at 22:10
  • 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. – Tim Fairbrother Feb 29 '16 at 22:14
  • 3
    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. – Peter Oct 11 '16 at 01:50