React-router: v4_ react-router-redux `push` not work

[petitspois]

import { push } from 'react-router-redux'

// resuable fetch Subroutine
// entity :  user | repo | starred | stargazers
// apiFn  : api.fetchUser | api.fetchRepo | ...
// id     : login | fullName
// url    : next page url. If not provided will use pass it to apiFn
function* fetchEntity(entity, url, data) {
  yield put( entity.request(data) )
  const {response, error} = yield call(api.fetchData, {url: url, data});
  if(response){
    if(response.data.code == 105){
      yield put(push('/'))
      return;
    }
    yield put( entity.success(data, response) )
  }
  else
    yield put( entity.failure(data, error) )
}

Url change, page does not change

[timdorr]

Please read the guide for this: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/redux.md#blocked-updates

[damianobarbati]

@petitspois were you able to solve this?
I'm having the same issue but no solution so far: https://github.com/reactjs/react-router-redux/issues/561
Push is kinda broken.

[petitspois]

@damianobarbati already solved！
As follows:

Add to history.js

import createHistory from 'history/createBrowserHistory';

export const history = createHistory()

configureStore.js

import { history } from '../utils/history'

const routersMiddleware = routerMiddleware(history)

const middlewares = [sagaMiddleware, routersMiddleware];

....
....
const store = createStore(rootReducer, initialState, composeEnhancers( applyMiddleware(...middlewares)));

App.js

import {
  Router
} from 'react-router-dom';
import { history } from '../utils/history'      



export default class App extends Component{
    render(){
        return (
            <Router history={history}>
                <Switch>  
                        <Route exact path="/" component={Home}></Route>
                        <Route path="/Dashboard" component={Dashboard} />
                </Switch>  
            </Router>
        )
    }
}

After you can use it：

import { history } from '../utils/history';

// resuable fetch Subroutine
// entity :  user | repo | starred | stargazers
// apiFn  : api.fetchUser | api.fetchRepo | ...
// id     : login | fullName
// url    : next page url. If not provided will use pass it to apiFn
function* fetchEntity(entity, url, data, cb) {

    if(response.data.code == 105){
        history.replace('/');
        return;
    }

}

You can also go tohttp://stackoverflow.com/questions/42123261/programmatically-navigate-using-react-router-v4