Redirection not work after action

[jesus-chacon]

Hi, I have using connected-react-router 6.1.0 in my react project stack.

react -> 16.7.0
react-router-dom -> 4.3.1
react-redux -> 6.0.0
redux-thunk -> 2.3.0

I have configurated my app, and router works perfectly (I can use the Redirect component from react-router). The problem that I have detected is produced when I am doing an API call (action) and before I want to redirect (promise finish). I don´t know why the location path change to the right URL but the page component not is loaded, (If I reload the page I can continue).

Example:

import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { push } from "connected-react-router";

import {redirectAction} from "./actions.js";

sampleComponent extends Component {
  constructor (){...}
  
  formSending = async () => {
    await this.props.firstApiCall() // like 5 seconds
    await this.props.secondApiCall() // like 500ms

   // Here I want to redirect I have try with this:

  this.props.redirect("/new-route");
  this.props.push("/new-route");
  // I have try creating an action how explain in the FAQ
  this.props.redirectWithAction("new-route");

  }
}

mapDispatchToProps = (dispatch) => ({
  redirect: bindActionCreators(push, dispatch),
  push,
  redirectWithAction: bindActionCreator(redirectAction, dispatch)
});

export default connect(null, mapDispatchToProps)(sampleComponent);

/// actions.js

export const redirectAction = route => dispatch => {
  console.log("Redirecting to", route);
  dispatch(push(route));
};

Anyone can help me, please?

[Funkyskank]

Try to update connected-react-router to v6.2.1 and wrap your App component in Route

<ConnectedRouter history={history}>
  <Route path="/" component={App} />
</ConnectedRouter>

[damian66]

@Funkyskank I am experiencing the same issue and updating to v6.2.1 didn't help with the problem.
Of course, my component is wrapped in the Route.

[jesus-chacon]

@damian66 and @Funkyskank Just now I have resolve the problem only doing a new setup of the project I think that is a problem with the order of my import but I am investigating about that.

Thanks.

[YunzheZJU]

Similar problem under v6.2.1. Locking connected-react-router to v6.0.0 helps me.

[bertho-zero]

I had the same problem in a monorepo, I installed version 6.2.2 everywhere so that there is only one version and it worked.

[slnd94]

I seem to be having the same problem.

"connected-react-router": "6.2.2",
"react": "^16.4.0",
"react-dom": "^16.2.0",
"react-redux": "^6.0.0",
"react-router-dom": "^4.2.2",
"redux": "^4.0.1",
"redux-actions": "^2.2.1",
"redux-saga": "^1.0.0"

I have tried locking to "connected-react-router": "6.0.0"... to no avail.

[marcelowa]

Same problem here
Locking the version to 6.1.0 fixed the issue, but I hate staying in an outdated version

[DevSysEngineer]

I have the same issue. Downgrade to v6.0.0 fixed the problem.

[silltho]

I'm having the same issue. Location got changed but component isn't loading.
Downgrading to v6.1 and 6.0 didn't work. Please help !

EDIT:
This post solved the problem for me! #159 (comment)

[jambyung]

I had a same problem. This was indeed very simple problem. I looked at the installation steps and found that I was using BrowserRouter under ConnectedRouter

Router.js

const Router = () => {
  return (
    <BrowserRouter>
      <React.Suspense fallback={Loading}>
        <Switch>
          <Route exact path={ROUTER_ROOT} component={HomePage} />
        </Switch>
      </React.Suspense>
    </BrowserRouter>
  );
};

index.js

if (root) {
  ReactDOM.render(
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <Router />
      </ConnectedRouter>
    </Provider>,
    root
  );
}

[foodforarabbit]

I had a same problem. This was indeed very simple problem. I looked at the installation steps and found that I was using BrowserRouter under ConnectedRouter

Router.js

const Router = () => {
  return (
    <BrowserRouter>
      <React.Suspense fallback={Loading}>
        <Switch>
          <Route exact path={ROUTER_ROOT} component={HomePage} />
        </Switch>
      </React.Suspense>
    </BrowserRouter>
  );
};

index.js

if (root) {
  ReactDOM.render(
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <Router />
      </ConnectedRouter>
    </Provider>,
    root
  );
}

so is the provided code the solution or the problem code?

Anyway I'm getting a similar issue... yield(put(push('/location'))) in a saga will change the url, but not rerender. The location in the store is changed (can see the change via selectors) but component doesn't seem to be picking up this change (in the react inspector, it shows the previous location in the context). However, if I yield(put(push('/location'))) twice, or if I simply dispatch(push('/location')) from a component, it works properly.

The only difference in my setup is that I am using Switch and Route from react-router-dom instead of react-router. Also using 'connected-react-router/immutable' imports. This seems to have broken only recently (since 6.2.1? I was running my own fork of it with the immutable fix).

"react-router-dom": "4.3.1",
"connected-react-router": "6.2.2",

[DevSysEngineer]

I found the solution. I have replaced some Components classes to PureComponent.

[SaulGarza]

Dealt with this issue in version 6.3.1 with react-router-dom@4.3.1

The following previously stated answers did not fix it for me:

• PureComponent => Component on either the App.tsx or any containers.
• wrapping connected components with withRouter()
• Using the default Router component instead of ConnectedRouter

What did fix it for me was downgrading to version 6.0.0. After the downgrade I was able to revert all other changes, including running PureComponents as containers not wrapped with withRouter()

[AJamesPhillips]

@foodforarabbit that's problem code.
I was doing the same thing nesting BrowserRouter under ConnectedRouter and it caused the Redirect to update the page url but the redux state was not being updated. Removing the nested BrowserRouter allowed it to then work fine. Eg:

  import { BrowserRouter, Route, Redirect } from "react-router-dom"
  import * as React from "react"
  import * as ReactDOM from "react-dom"
  import { Provider } from "react-redux"
  import { ConnectedRouter } from "connected-react-router"

  import { configure_store, history } from "./state"

  const store = configure_store()

  function Redirecter () {
    return <Redirect to="/page_one"/>
  }
  
  function Main () {
-  return <BrowserRouter>
-    <div>
-      <Route exact path="/" component={Redirecter} />
-      <Route path="/page_one" component={PageOne} />
-    </div>
-  </BrowserRouter>
+  return <div>
+    <Route exact path="/" component={Redirecter} />
+    <Route path="/page_one" component={PageOne} />
+  </div>
  }

  const render_app = () =>
    ReactDOM.render(
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <Main />
        </ConnectedRouter>
      </Provider>,
      document.getElementById("app")
    )

  render_app()

The application state was incorrectly not updating:

{"router":{"location":{"pathname":"/","search":"","hash":""},"action":"POP"}}

But after removing the nested BrowserRouter then was correctly being set to:

{"router":{"location":{"pathname":"/page_one","search":"","hash":"","key":"mzo22x"},"action":"POP"}}

[foodforarabbit]

Oh that code isn't mine, I was just quoting the guy above me.

The problem seems to have gone away on my end, not sure if I upgraded a package and it fixed itself or what happened.

Recently, I upgraded react-router-dom from 4.3.1 to 4.4.0-beta.7 (connected-react-router is at 6.3.2).

However, I haven't really been testing it extensively so I'm not entirely sure if the problem has gone away - if anything changes I'll try to post an update here or something.

[Jcbobo]

I have same issue, the installations step seems to be ok (connectedRouter is present and hasn't other router below, no pureComponenet are used, component are wrapped in withRouter), i see the action correctly dispatched but the state router is not updated (and of course also url and page content are not updated)

same for push and goBack

yield  put(goBack());

yield put(push('/');

yield put(push('/url')

package.json

"react": "^16.8.2",
"connected-react-router": "^6.3.2",
 "react-dom": "^16.8.2",
 "react-redux": "^6.0.0",
"react-router-dom": "^4.3.1",
 "redux-saga": "^1.0.1"

[foodforarabbit]

@Jcbobo

fyi my package.json

"react": "16.7.0",
"connected-react-router": "6.3.2",
"react-dom": "16.7.0-alpha.0",
"react-redux": "6.0.0",
**"react-router-dom": "4.4.0-beta.7",**
"redux-saga": "0.16.2",

Try upgrading your react-router-dom package actually, that was one of my last upgrades.

[Jcbobo]

I already try but the issue is still there

[wild-flame]

Locking connected-react-router to v6.0.0 also helps me, but want to know what happened

[adamawang]

This is still happening in v6.8.0.

Downgrading to v6.0.0 was the solution, but like everyone else, I'd like to know why

[kaankucukx]

I tried all the above yet not working.

I managed to downgrade the react-router-dom version. But no valid for me.

I believe this is more than a major BUG, I have two projects separated each and one is working and the other not. Weird :(

[GianDigia]

Same here.

I also installed unnecessary peer dependencies just to be sure

"react-router": "5.1.2"
"react-router-dom": "^5.1.2"
"connected-react-router": "^6.8.0"
"react-redux": "^7.2.0"
"redux-thunk": "^2.3.0"

[enzocaminos]

I had a same problem. This was indeed very simple problem. I looked at the installation steps and found that I was using BrowserRouter under ConnectedRouter

Router.js

const Router = () => {
  return (
    <BrowserRouter>
      <React.Suspense fallback={Loading}>
        <Switch>
          <Route exact path={ROUTER_ROOT} component={HomePage} />
        </Switch>
      </React.Suspense>
    </BrowserRouter>
  );
};

index.js

if (root) {
  ReactDOM.render(
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <Router />
      </ConnectedRouter>
    </Provider>,
    root
  );
}

Thank you so much, I made the same mistake and this solved the problem!