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

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=>{

                })
        }
    }

GiamPy · Accepted Answer · 2018-07-02 13:11:45Z

0

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.

answered Jul 2, 2018 at 13:11

GiamPy

3,5703 gold badges32 silver badges52 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related