Redirecting to another page after successful login using axios in react using hooks-CodePudding

I want the page to automatically render another page after the logging in using an API and axios in react with the help of hooks. But i'm unable to do so. I keep getting an error saying

ERROR: Success(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

What am I doing wrong?

import React from "react";
import { useState, useEffect } from "react";
import axios from "axios";
import Success from "./Succesful";
import { Redirect } from 'react-router'
import { useHistory } from "react-router-dom";

export default function Login() {
 const history = useHistory();
 const [formData, setFormData] = useState({
   email: "",
   password: "",
 });


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

   axios
     .post("http://API", {
       email: formData.email,
       password: formData.password,
     })
     .then(function (response) {
       console.log(response);
       console.log("Successfully Logged in ");
       //  history.push("/success"); This is when i want the page to load 
     
     })
     .catch(function (error) {
       console.log(error);
     });
 };

 return (
   <form onSubmit={handleSubmit}>
     <h3>Sign In</h3>

     <div className="form-group">
       <label>Email address</label>
       <input
         type="email"
         name="email"
         className="form-control"
         placeholder="Enter email"
         value={formData.email}
         onChange={(e) => setFormData({ ...formData, email: e.target.value })}
       />
     </div>

     <div className="form-group">
       <label>Password</label>
       <input
         type="password"
         name="password"
         className="form-control"
         placeholder="Enter password"
         value={formData.password}
         onChange={(e) =>
           setFormData({ ...formData, password: e.target.value })
         }
       />
     </div>

     <button type="submit" className="btn btn-primary btn-block">
       Submit
     </button>
   </form>
 );
}

This is my App.js

import React from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  Redirect,
} from "react-router-dom";

import "bootstrap/dist/css/bootstrap.min.css";
import Login from "./components/Login";
import Signup from "./components/Sign-Up";
import Success from "./components/Succesful";

function App() {
  return (
    <Router>
      <div className="App">
        <div className="container">
          <div className="row">
            <div className="col-md-12">
              <Switch>
                <Route exact path="/">
                  <Redirect to="/signup" />
                </Route>
                <Route exact path="/signup" component={Signup} />
                <Route exact path="/login" component={Login} />
                <Route exact path="/success" component={Success} />
              </Switch>
            </div>
          </div>
        </div>
      </div>
    </Router>
  );
}

export default App;

CodePudding user response：

What you are doing is good. However, check that response.status is equal to 200

if(response?.status===200)
  history.push('/success')
else
  alert(response?.message)

CodePudding user response：

import { useNavigate } from "react-router-dom";
const navigate=useNavigate();

  axios
     .post("http://API", {
       email: formData.email,
       password: formData.password,
     })
     .then(function (response) {
       console.log(response);
       console.log("Successfully Logged in ");
         navigate('/sucess'); //use this  instead of history.push
     
     })
     .catch(function (error) {
       console.log(error);
     });