connected-react-router: Redirection not work after action

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?

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 15
Comments: 23 (4 by maintainers)

Commits related to this issue

Address part of the confusions highlighted in #230 — committed to AJamesPhillips/connected-react-router by AJamesPhillips 5 years ago
Address part of the confusions highlighted in #230 (#277) — committed to supasate/connected-react-router by AJamesPhillips 5 years ago

Most upvoted comments

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
  );
}

+10

jambyung on Feb 7, 2019

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"

GianDigia on May 27, 2020

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

YunzheZJU on Jan 16, 2019

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"

Jcbobo on Apr 2, 2019

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

AJamesPhillips on Mar 25, 2019

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

adamawang on May 14, 2020