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?

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

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