Redirecting page using react-router-dom/ react-router v4 outside Component

Question

I have React-Redux app, and should write a common error handler for all errors returned from the server. Currently for routing I m using 'react-router-dom'. I m using 'withRouter' inside components. But can I redirect inside actions? Or how can this be accomplished?

I saw link How to push to History in React Router v4?. Should I use react-router-redux? Or can this be done with react-router-dom. Could anyone please help?

export function loginDetails(details) {   
return function (dispatch,getState) { 
    gateway.loginUser(details.username, details.password).then(
        response => {
          dispatch({type: AUTH_USER});             
          dispatch(fetchCompanies());              
      },
       error =>{
           handleError(error, dispatch);               
       })
}
}

handleError = (error, dispatch) =>{    
switch(error.response.status){
    case XX: 
        //Want to redirect to '/' here           
        break;
    case YY:    
        //Want to redirect to '/login' here        
        break;
    default:          
        break;
}
}

score 2 · Answer 1 · answered Jul 13 '22 at 05:15

Try the below code for redirecting to another page,

import { useHistory } from "react-router-dom";

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

Michael Ossig · Answer 2 · 2018-05-04T13:34:07.403

1

what component are you using this in? For example, if someones not logged in, I would just check that with mapStateToProps and if they are not logged in, then import and use react-router-dom's Redirect to send them to the logged in page

Depending on how your store is setup, it may look like:

    const mapStateToProps = state => ({
       loggedIn: state.auth.user !== null
    })

Then your conditional within whatever component you are making the check for

    if(!loggedIn){
      return <Redirect to="/login" />
    }

edited May 04 '18 at 13:34

answered May 04 '18 at 13:28

Michael Ossig

205
2
9

Thanks for this. I have similar variable. But, I want to redirect when a page gets refreshed and token gets invalid. I need to redirect to loginPage. Not sure how this can be done. – user8125765 May 07 '18 at 06:35
do you save the authToken in your state? Also, are you running Node on your backend? – Michael Ossig May 08 '18 at 12:42
I have it in sessionStorage. Using Grails as backend. – user8125765 May 08 '18 at 13:03
I see. Ive never used grails but my suggestion would be to add the token to your state and have it checked on each render that you want it to check for. add it to your auth reducer if you have one and its a pretty simple check – Michael Ossig May 08 '18 at 15:09
I used a HOC and in componentWillUpdate(), redirected to homepage if user is not authenticated. – user8125765 May 09 '18 at 06:25
use componentDidMount() – Michael Ossig May 09 '18 at 18:31

Redirecting page using react-router-dom/ react-router v4 outside Component

2 Answers2