React Router 4 How do I redirect programmatically inside a function?

Question

I have a singinUser function which is called when user clicks the submit button. I want the user to redirect to another url when fetching the data is completed. In previous versions of react, I used to use browserHistory from 'react-router'. What should I do in react-router 4?

import axios from 'axios';
    const ROOT_URL = 'http://localhost:3090';

    export const signinUser = ({ email, password }) => {
        return (dispatch) => {
            axios.post(`${ROOT_URL}/signin`, { email, password })
                .then(response =>{
                    //I want to redirect
                })
                .catch(err=>{

                })
        }
    }

score 0 · Answer 1 · answered Jul 02 '18 at 13:11

This is personally how I perform a redirect for protected routes in my application:

const GuestRoute = ({ component: Component, ...rest }) => (
  <WebServiceContextConsumer>
    {
      context =>
        <Route
          {...rest}
          render={props =>
            context.auth.getUser() 
              ? (<Redirect to={{pathname: "/", state: { from: props.location }}} />) 
              : (<Component {...props} />)
          }
        />
    }
  </WebServiceContextConsumer>
);

You need to separate your view from your logic. Perform your whatever call, then uses promises to catch the response and handle it however you want in your View component.

React Router 4 How do I redirect programmatically inside a function?

1 Answers1