Why 'yield(push('/xxx'))' can't jump to the next page？Must I refresh the browser?

[amazingzcj]

export function* loginFetch(action) {
    try {
        const info = yield call(loginUserFetch, action.params);
        console.log(info)
        if(!info) return yield put({type: actionTypes.LOG_FETCH_FAIL, loading:false });
        if (Object.keys(info).length > 0) {
            const {id, name, token} = info;
            manageSession.judgeSession("userId", id);
            manageSession.judgeSession("userName", name);
            manageSession.judgeSession("token", token);
            yield put({type: actionTypes.LOG_FETCH_SUCCESS, info});
            yield put(push("/main"));
        }
    } catch (error) {
        yield put({type: actionTypes.LOG_FETCH_ERROR, isLogin: false})
    }
}

actually it works，the URL has changed，but the page doesn't

[favna]

@amazingzcj did you ever figure this out? I'm facing the same issue right now.

Both on latest versions of this lib, react-router and react-router-dom as well as on v6.0.0 and v4.3.1 respectively.

[amazingzcj]

@Favna not yet, because of no error or warning infos. my react-router and react-router-dom are both v5.0.0. try update the version, and try use withRouter outside your component, and see push whether works, if not ,then, you maybe have to refresh the browser.

[favna]

I'm not sure what exactly it was but I managed to.. solve... It? I use this lib v6.4.0, react-router and react-router-dom v5 and v6 of react-redux.

Turns out the problem I was facing was actually something completely different not related to routing but since I had routing issues in the past that's where I assumed it was now.

If you want I can share how exactly I set up my redux-saga - store - router link.

[amazingzcj]

I'm not sure what exactly it was but I managed to.. solve... It? I use this lib v6.4.0, react-router and react-router-dom v5 and v6 of react-redux.

Turns out the problem I was facing was actually something completely different not related to routing but since I had routing issues in the past that's where I assumed it was now.

If you want I can share how exactly I set up my redux-saga - store - router link.

sure, I want. Thanks for sharing with me. It really confuses me.

[favna]

@amazingzcj I've posted it on Gist here: https://gist.github.com/Favna/f4e7bf31cd8240d9d0fb9f2501b7e47c

See the comment after all the files for a table of contents of sorts.

[AndyBan]

I have this issue but I think its perhaps a bug in react-router?

I have two apps that merged together and I listen for hash navigations from the old app and then push a redux push navigation action to redirect to the new location.

Seems if I listen for a @@router/LOCATION_CHANGE action then dispatch a replace then the url updates but the page doesn't update. You can see in the react debugger that state of react-router is the first location change and it doesn't get the state from the replace (its visible in the redux debugger).

Seems if you put a 1ms timeout and dispatch the replace later it works :/

[hisham-blackbuck]

having the same problem in redux-thunk. push() method changes the url but does not change the view. It doesn't even dispatch any action.

[amazingzcj]

having the same problem in redux-thunk. push() method changes the url but does not change the view. It doesn't even dispatch any action.

sorry...maybe you need use the withRouter to wrap your component

[amazingzcj]

I have this issue but I think its perhaps a bug in react-router?

I have two apps that merged together and I listen for hash navigations from the old app and then push a redux push navigation action to redirect to the new location.

Seems if I listen for a @@router/LOCATION_CHANGE action then dispatch a replace then the url updates but the page doesn't update. You can see in the react debugger that state of react-router is the first location change and it doesn't get the state from the replace (its visible in the redux debugger).

Seems if you put a 1ms timeout and dispatch the replace later it works :/

actually i cant find what happened...now i let the page refresh instead then it worked

[ctkc]

@amazingzcj Any update of this? I have the same issue. When I dispatch the push the URL change but the component doesn't change.

[maxrikotero]

Same issue and it's annoying. The problem is still happen "connected-react-router": "^6.6.1" / "react-router-dom": "5.1.2".

[songjoe]

I have the same issue. Is there any solution?

[flibustier7seas]

I have the same issue. I changed URL when user is unathorized:

export default function* root() {
  yield takeEvery(LOCATION_CHANGE, routerSaga);
}

function* routerSaga({ payload }: LocationChangeAction) {
  const path = payload.location.pathname as Routes;

  switch (path) {
    case RouteNames.page1: {
      yield call(page1Saga);
    }
  }
}

function* page1Saga() {
  yield put(push(RouteNames.signIn)); // when user unauthorized
}

Temporary solution: https://github.com/supasate/connected-react-router/issues/337#issuecomment-586019315

function* page1Saga() {
  yield delay(1); // Add delay
  yield put(push(RouteNames.signIn)); // when user unauthorized
}

Example: https://codesandbox.io/s/connected-react-routerissue-304-v2gll?file=/src/sagas/index.ts