Using Redirect upon form submission in React

Question

I have been attempting to Redirect upon user login. The login works correctly with my database and will conditionally render my new links for my admin portal. I was trying to use Redirect upon getting a status code 200, but I am not sure if this is even the correct way.

axios post for Login component:

const handleSubmit = e => {
    e.preventDefault();
    console.log(adminLogin)

    axios
      .post("/api/Authentication", adminLogin)
      .then(function(response) {
        if (response.status === 200) {
          setIsLoggedIn(true);
          <Redirect to="/inventory" />
        }
        setAdminLogin(response.data);
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });

Darshil Mehta · Accepted Answer · 2019-11-05 03:58:50Z

1

You can't Redirect from function directly. If you want to redirect from function then you can use this.props.history.push('/inventory');

And another way to redirect using state.

const[login,setIsLoggedIn]=useState(false)

if (response.status === 200) {
       setIsLoggedIn(true);
}
if(login){
       return <Redirect to='/inventory'/>
}

return(
       //Main function return
);

answered Nov 5, 2019 at 3:58

Darshil Mehta

1221 silver badge7 bronze badges

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

Comments

Muhammad Rosyid · Accepted Answer · 2019-11-05 04:00:00Z

0

if you use react-router-dom you can see this example from documentation and you can see similiar question in here

answered Nov 5, 2019 at 4:00

Muhammad Rosyid

2064 silver badges7 bronze badges

Comments

Nikhil Goyal · Accepted Answer · 2019-11-05 07:01:37Z

As it is an axios call, it is always recommended to use this.props.history.push().

Make sure while using this function, you have already used withRouter to route your component.

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import axios from 'axios';

class App extends Component {
    ...
    const handleSubmit = e => {
    e.preventDefault();
    console.log(adminLogin)

    axios
      .post("/api/Authentication", adminLogin)
      .then(function(response) {
        if (response.status === 200) {
          setIsLoggedIn(true);
          this.props.history.push('/inventory');
        }
        setAdminLogin(response.data);
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });
    }
    ...
}

export default withRouter(App);

If you won't wrap your component with withRouter, history object will not be present in this.props and hence, will be throwing an error.

Collectives™ on Stack Overflow

Using Redirect upon form submission in React

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related