Question 74128 in Reactjs Question posted in
The new location for the React Documentation can be found here.

useEffect is not working with useNavigate – Reactjs

I am currently developing a site and I have made the logic for the login process so that the system automatically transfers the user to the home page as soon as the login process is completed, but when I try to log in, an error appears in the browser

enter image description here

I tried using history and it didn’t work, then I tried useNavigate and it didn’t work either

I think usehistory is no longer supported in the new react version but even useNavigate is not working

This is the backend codeenter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    import { useContext, useEffect, useState } from "react";
import { Link } from "react-router-dom";
// import { AuthContext } from "../../components/context/authContext";
import "./login.scss";
import axios from "axios";
import Loading from "../../components/Loading.js";
import ErrorMessage from "../../components/ErrorMessage";
import { useDispatch, useSelector } from "react-redux";
import { login } from "../../actions/userActions.js"

export default function Login({ history }) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const dispatch = useDispatch();

  const userLogin = useSelector((state) => state.userLogin);
  const { loading, error, userInfo } = userLogin;

  // const {login} = useContext(AuthContext);


  useEffect(() => {
    if (userInfo) {
      history.push("/")
    }
  }, [history, userInfo]);

  const handleLogin = async (e) => {
    e.preventDefault();
    // console.log(email, password);

    dispatch(login(email, password));

  };
  return (
    <div className="Login">
      <div className="card">
        <div className="left">
          <h1>Hello world</h1>
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Obcaecati
            aspernatur illum porro dolorum numquam corporis adipisci quos magni
            voluptatum nostrum soluta excepturi, vel quas libero exercitationem
            dignissimos! Nostrum, earum ex?
          </p>
      <span>Don't you ave an account?</span>
      <Link to="/register">
      <button>Register</button>
      </Link>
    </div>
    <div className="right">
      {error && <ErrorMessage>{error}</ErrorMessage>}
      {loading && <Loading />}
      <h1>Login</h1>
      <form onSubmit={handleLogin}>
        <input onChange={(e) => setEmail(e.target.value)} value={email} type="email" placeholder="Enter Email" />
        <input onChange={(e) => setPassword(e.target.value)} value={password}         
type="password" placeholder="Password" />
            <button type="submit">Login</button>
          </form>
        </div>
      </div>
    </div>
  );
}

  2. 0

    Oh, you need to import useNavigate from react-router-dom, and then use this hook in your application. You can learn more about navigating here.

    Here is your code:

    import { useContext, useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom"; // !!! I added import here !!!
// import { AuthContext } from "../../components/context/authContext";
import "./login.scss";
import axios from "axios";
import Loading from "../../components/Loading.js";
import ErrorMessage from "../../components/ErrorMessage";
import { useDispatch, useSelector } from "react-redux";
import { login } from "../../actions/userActions.js"

export default function Login({ history }) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const dispatch = useDispatch();

  const userLogin = useSelector((state) => state.userLogin);
  const { loading, error, userInfo } = userLogin;

  const navigate = useNavigate(); // !!! Declaring navigate !!!

  // const {login} = useContext(AuthContext);


  useEffect(() => {
    if (userInfo) {
      navigate("/"); // !!! And navigating through your app !!!
    }
  }, [userInfo]);


  };
  
  ...
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search