Does not work with history@^3

[gajus]

Using:

• react-router-redux@v4.0.4
• history@3.0.0-2

Original issue description (relevant):

I have spent a good 3 hours trying to understand the underlying issue, but have not found anything that would strike as incompatible. All docs include a variation of this setup that is supposed to work:

import React from 'react';
import ReactDOM from 'react-dom';
import {
    Provider
} from 'react-redux';
import store from './store';
import {
    Route,
    Router,
    useRouterHistory
} from 'react-router';
import {
    createHistory
} from 'history';
import {
    syncHistoryWithStore
} from 'react-router-redux';

const browserHistory = useRouterHistory(createHistory)();

const history = syncHistoryWithStore(browserHistory, store, {
    selectLocationState (state) {
        return state.getIn(['route']).toJS();
    }
});

history.listen((location) => {
    console.log('location', location);
});

ReactDOM.render(<Provider store={store}>
    <Router history={history}>
        <Route path='*' component={() => { console.log('Hello!'); }}>
            <div>Hello!</div>
        </Route>
    </Router>
</Provider>, document.querySelector('#app'));

However, using browserHistory exported from react-router works without an issue:

import React from 'react';
import ReactDOM from 'react-dom';
import {
    Provider
} from 'react-redux';
import store from './store';
import {
    Route,
    Router,
    // useRouterHistory
    browserHistory
} from 'react-router';
import {
    createHistory
} from 'history';
import {
    syncHistoryWithStore
} from 'react-router-redux';

// const browserHistory = useRouterHistory(createHistory)();

const history = syncHistoryWithStore(browserHistory, store, {
    selectLocationState (state) {
        return state.getIn(['route']).toJS();
    }
});

history.listen((location) => {
    console.log('location', location);
});

ReactDOM.render(<Provider store={store}>
    <Router history={history}>
        <Route path='*' component={() => { console.log('Hello!'); }}>
            <div>Hello!</div>
        </Route>
    </Router>
</Provider>, document.querySelector('#app'));

When I say "does not work", I mean:

• history.listen logs location as undefined.
• No routes are resolved.

When I say "works", I mean:

• history.listen logs location as: {pathname: "/", search: "", hash: "", state: null, action: "POP"…}
• * route is resolved.>

[gajus]

It appears that the reason is:

Breakage: history.listen no longer calls the callback synchronously once. Use history.getCurrentLocation instead

– https://github.com/mjackson/history/blob/v3.0.0-2/CHANGES.md#300-0

[timdorr]

history 3.0.0 isn't currently published. We'll revisit once it's out, but there's still a lot of pending changes coming to the API.

[elliottsj]

history@3.0.0 is now published

[timdorr]

react-router doesn't support it yet. So, realistically, we should wait for router to add support and then add it to this library. At the moment, it's essentially impossible to test until that is done.

[gajus]

For reference, history@3 has been added to react-router#v3.0.0-alpha.2.