React Problema redirect dopo login React

Bynary01

Utente Silver
3 Ottobre 2016
57
32
0
73
Salve a tutti sto creando un piccolo gestionale su react ed ho un problema che si manifesta quando l'utente clicca sul tasto login del form di autenticazione, in pocheparole anche se le credenziali sono giuste ed il parametro che ho creato per verificare l'avvenuta autenticazione (isLogged) è true, il browser non mi redireziona alla dashboard al path "/"
invio il codice così è più chiaro

component Login:
JSX:
import { useState, useContext } from "react";
import "./Login.css";
import Axios from "axios";
import { UserContext } from "../../Context/UserContext";

const Login = () => {
  const { username, setUsername } = useContext(UserContext);
  const { email, setEmail } = useContext(UserContext);
  const { password, setPassword } = useContext(UserContext);
  const { setUUID } = useContext(UserContext);
  const { isLogged, setLogged } = useContext(UserContext);
  const [error, setError] = useState("");

  const handleClick = async (event) => {
    event.preventDefault();
    const result = await Axios.post("http://localhost:3005/login", {
      email,
      username,
      password,
    });
    if (result.data.hasOwnProperty("error")) {
      setError(result.data.error);
    } else {
      setError("");
      setUUID(result.data.uuid);
      setLogged(true);
      console.log(isLogged);
    }
  };

  return (
    <form className="login">
      <div>
        <label htmlFor="email">e-mail</label>
        <input
          id="email"
          type="email"
          placeholder="[email protected]"
          onChange={(e) => setEmail(e.target.value)}
        />
      </div>
      <div>
        <label htmlFor="username">username</label>
        <input
          id="username"
          type="text"
          placeholder="Jhonn123"
          onChange={(e) => setUsername(e.target.value)}
        />
      </div>
      <div>
        <label htmlFor="password">password</label>
        <input
          id="password"
          type="password"
          onChange={(e) => setPassword(e.target.value)}
        />
      </div>
      <button onClick={handleClick} disabled={!username || !email || !password}>
        Login
      </button>
      <p
        className={error && password ? "login__error" : "login__error--hidden"}
      >
        {error}
      </p>
    </form>
  );
};
export default Login;

app component:
JSX:
/* eslint-disable no-unused-vars */
import "./App.css";
import {
  NutritionistDashboard,
  CreatePerson,
  Register,
  Login,
  PrivateRoute,
} from "./components";
import Axios from "axios";
import { useState, useEffect, useContext } from "react";
import {
  BrowserRouter as Router,
  Route,
  Routes,
  Navigate,
} from "react-router-dom";
import { UserProvider, UserContext } from "./Context/UserContext";

function App() {
  const { isLogged } = useContext(UserContext);
  return (
    <Router>
      <div className="App">
        <Routes>
          <Route path="/register" element={<Register />} />
          <Route path="/create" element={<CreatePerson />} />
          <Route path="/login" element={<Login />} />
          <Route element={<PrivateRoute />}>
            <Route path="/" element={<NutritionistDashboard />} />
          </Route>
        </Routes>
      </div>
    </Router>
  );
}

export default App;
{
  /*<CreatePerson setActive={this.setActive} />*/
}

component context:
JSX:
import { React, createContext, useState } from "react";

export const UserContext = createContext({});

export const UserProvider = ({ children }) => {
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [UUID, setUUID] = useState("");
  const [isLogged, setLogged] = useState(false);
  return (
    <UserContext.Provider
      value={{
        username,
        setUsername,
        email,
        setEmail,
        password,
        setPassword,
        UUID,
        setUUID,
        isLogged,
        setLogged,
      }}
    >
      {children}
    </UserContext.Provider>
  );
};


protected Route:
JSX:
import { Navigate, Outlet } from "react-router-dom";
import { useContext } from "react";
import { UserContext } from "../../Context/UserContext";

const PrivateRoute = () => {
  const { isLogged } = useContext(UserContext);
  return (isLogged ? <Outlet /> : <Navigate to="/login" />)
};
export default PrivateRoute;
 
Non sono un esperto di React.js, ma quando entri nella funzione:

const handleClick = async (event) => {
event.preventDefault();
const result = await Axios.post("http://localhost:3005/login", {
email,
username,
password,
});
if (result.data.hasOwnProperty("error")) {
setError(result.data.error);
} else {
setError("");
setUUID(result.data.uuid);
setLogged(true);
console.log(isLogged);
}
};

Dopo aver controllato che il login sia corretto, cambi il valore delle varie variabili, ma non stai reindirizzando l'utente alla home, forse dovresti usare alla fine la funzione window.replace("/").