Redirect in redux action using react-router-dom v4

Question

I'm trying to redirect user to '/' route in my redux action. But I can see that the route in the browser is changing but component does not render (it stays at the same view).

My action looks like that:

import history from '../../history';

export const logoutUser = () => dispatch => {
  api.logout();
  // redirect
  history.push('/');

  dispatch({ type: TYPES.LOGOUT_USER });
};

My component with routes looks like that:

import React, { Component, Fragment } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import history from './history';
import { Landing, AnotherComponent } from './views';


class App extends Component {
  render() {
    return (
      <Fragment>
        <Router history={history}>
          <div className="main-container">
            <Route exact path="/" component={Landing} />
            <Route path="/another_route" component={AnotherComponent} />
          </div>
        </Router>
      </Fragment>
    );
  }
}

export default App;

And history.js file:

import createHistory from 'history/createBrowserHistory';

export default createHistory();

Thanks for helping!

Another option is to conditionally render the <Redirect /> component from react-router-dom based on whatever store property you use to track authenticated status. — Alexander Staroselsky
– Alexander Staroselsky, Commented Mar 8, 2019 at 21:23

Lee O. · Accepted Answer · 2019-03-08 21:33:38Z

1

If you use withRouter from react-router-dom in your component that triggers the logout call, you can pass the history to your action through the ownProps of mapDispatchToProps. Here is an example from one of my apps.

Component:

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    createTraining: training => dispatch(createTraining(training, ownProps)),
  };
};

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(TrainingDetailsPage));

My Thunk:

export function createTraining(training, ownProps) {
  return function(dispatch) {
    return Api.createTraining(training).then(response => {
      ownProps.history.push('/trainings');
    });
  };
}

answered Mar 8, 2019 at 21:33

Lee O.

3,3723 gold badges28 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

UjinT34 · Accepted Answer · 2019-03-08 21:12:28Z

0

BrowserRouter doesn't support history property. Try using the history object provided by react-router. Anything rendered directly from Route gets it as a property. For a deeply nested component you can use withRouter HOC. You will have to pass this history object to logoutUser.

Sample code from the documentation.

answered Mar 8, 2019 at 21:12

UjinT34

4,9971 gold badge14 silver badges28 bronze badges

Comments

SakoBu · Accepted Answer · 2019-03-08 21:22:34Z

0

If you're using history import Router not BrowserRouter from the lib... Something like this:

import React, { Component } from 'react';
import { Router, Route, Switch } from 'react-router-dom';

import history from './history';
import { Landing, AnotherComponent } from './views';

class App extends Component {
  render() {
    return (
      <Router history={history}>
        <Switch>
          <div className="main-container">
            <Route exact path="/" component={Landing} />
            <Route path="/another_route" component={AnotherComponent} />
          </div>
        </Switch>
      </Router>
    );
  }
}

export default App;

answered Mar 8, 2019 at 21:22

SakoBu

4,0311 gold badge18 silver badges35 bronze badges

Comments

DrSalas · Accepted Answer · 2021-02-18 14:34:50Z

0

Since I have not enough rep to vote or comment, I just wanted to say that the answer provided by Lee O. works perfectly fine. I am using [email protected] with .

I just wanted to add one detail. You don't need to add the withRouter and the connect when exporting the component if the component in question is already inside a parent component that uses them.

answered Feb 18, 2021 at 14:34

DrSalas

1

1 Comment

Dale Over a year ago

Please wait until you have enough rep to add comments instead of adding comments answers. It won't take long.

Collectives™ on Stack Overflow

Redirect in redux action using react-router-dom v4

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related