reactjs/react-router-redux

Uncaught TypeError: history.listen is not a function

zhangwei900808 opened this issue · 1 comments

I used redux-persist in my project but there is a error, how can I resolve it?
store.js

import {createStore, combineReducers, applyMiddleware} from 'redux'
import thunkMiddleware from 'redux-thunk'
import logger from 'redux-logger'
import {routerReducer, routerMiddleware, push} from 'react-router-redux'
import createHistory from 'history/createBrowserHistory'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/es/storage' // default: localStorage if web, AsyncStorage if react-native
import reducers from '../reducers'

const history = createHistory();
const historyRouterMiddleware = routerMiddleware(history);

const middleWares = [thunkMiddleware, historyRouterMiddleware,logger];


const config = {
    key: 'root', // key is required
    storage, // storage is now required
};
let comReducers = combineReducers({
    ...reducers,
    router: routerReducer
});
const persistReducers = persistReducer(config, comReducers);

export default function configureStore () {
    let store = createStore(persistReducers, applyMiddleware(...middleWares));
    let persistor = persistStore(store);

    return { persistor, store }
}

app.js

import React from 'react'
import {Provider} from 'react-redux'

import {ConnectedRouter} from 'react-router-redux'
import {matchRoutes, renderRoutes} from 'react-router-config'
import {Switch} from 'react-router-dom'
import { PersistGate } from 'redux-persist/es/integration/react'
import configureStore from './store'
import routes from './router'

const { persistor, store } = configureStore();
const onBeforeLift = () => {
    // take some action before the gate lifts
};
const App = () => (
    <Provider store={store}>
        <PersistGate
            loading={<div />}
            persistor={persistor}>
            <ConnectedRouter history={history}>
                <Switch>
                    {renderRoutes(routes)}
                </Switch>
            </ConnectedRouter>
        </PersistGate>
    </Provider>
);

export default App

I had resolve my problem ,is my bad .

import React from 'react'
import {Provider} from 'react-redux'

import {ConnectedRouter} from 'react-router-redux'
import {matchRoutes, renderRoutes} from 'react-router-config'
import {Switch} from 'react-router-dom'
import { PersistGate } from 'redux-persist/es/integration/react'
import createHistory from 'history/createBrowserHistory'
const history = createHistory();
import configureStore from './store'
import routes from './router'

const { persistor, store } = configureStore();
const onBeforeLift = () => {
    // take some action before the gate lifts
};
const App = () => (
    <Provider store={store}>
        <PersistGate
            loading={<div />}
            persistor={persistor}>
            <ConnectedRouter history={history}>
                <Switch>
                    {renderRoutes(routes)}
                </Switch>
            </ConnectedRouter>
        </PersistGate>
    </Provider>
);

export default App

when I add const history = createHistory(); in app.js it worked! :)