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"}}