Pourquoi la redirection vers la page d'accueil n'a-t-elle aucun effet lors de l'utilisation de React React-Router et de UseNavigate après la connexion ?

Question

Après une connexion réussie, je souhaite que l'utilisateur soit redirigé vers la page d'accueil, je stocke les données de demande d'API de connexion de l'utilisateur dans une variable appelée currentUser, donc si currentUser est vrai, il doit rediriger vers la page d'accueil. Voici comment je gère les demandes de connexion :

export const AuthContextProvider = ({ enfants }) =>
  const [currentUser, setCurrentUser] = useState(
    JSON.parse(localStorage.getItem("utilisateurs")) ||
  );

  const login = async (entrées) =>

  

    const res= wait axios.post("https://micacarballo-social-media-api.onrender.com/api/v1/auth/login",inputs,{
      
    })
  setCurrentUser (res.data)
  } ;

  useEffect(() => {
    localStorage.setItem("utilisateurs", JSON.stringify(currentUser));
  }, [utilisateur actuel, connexion]);
 
  const updateUser = async () =>{
    const user = JSON.parse(localStorage.getItem("users"))
    const res= wait axios.get("https://micacarballo-social-media-api.onrender.com/api/v1/users/me/",{
 en-têtes : {
  Autorisation : `jwt ${user.token}`
 }

    })
   setCurrentUser (res.data)
  }
  retour (
    <AuthContext.Provider value={{ currentUser, login, updateUser}}>
      {enfants}
    </AuthContext.Provider>
  );
};</pré>
<p>Mes itinéraires protégés :</p>
<pre class="brush:php;toolbar:false;">importer { AuthContext } depuis './context/authContext'
fonction App() {
  
  const {utilisateuractuel} = useContext(AuthContext);

 

  

 const Mise en page = ()=>{
  

  retour(
    <div>
        <Barre de navigation />
        <div style={{ display: "flex" }}>
          <BarreGauche />
          <div style={{ flex : 6 }}>
            <Sortie />
          </div>
          
        </div>
      </div>
  )
 }
 
 const ProtectedRoute = ({enfants}) =>{
  si(!utilisateuractuel){
    return <Navigate to="/login" />
  }retourner les enfants
  
}


  const routeur = createBrowserRouter ([
   {
      chemin : "/",
      élément: (
      <RouteProtégée>
      <Mise en page/>
      
      </RouteProtectée>
      ),
      enfants :[
        {
          chemin :"/",
          élément : <Accueil />
        },{
          chemin :"/profile/:id",
          élément :<Profil />
        }
      ]
    }, {
      chemin : "/login",
      élément : <Connexion />,
    },
    {
      chemin : "/register",
      élément : <Enregistrer />
    },
    
  ]);

  

  retour (
    <div className="Application">
       <RouterProvider router={router} />
    </div>
  )
}

exporter l'application par défaut

我的登录页面：

const Connexion = () => {
  const [entrées, setInputs] = useState({
    email : "",
    mot de passe : "",
  });
  const [err, setErr] = useState(null);
  const [isLoading, setIsLoading] = useState(false); // variable d'état pour le chargement du spinner


  const naviguer = useNavigate()

  const handleChange = (e) => {
    setInputs((prev) => ({ ...prev, [e.target.name]: e.target.value }));
  } ;
  const {connexion} = useContext (AuthContext)

  const handleLogin = async (e) => {
    e.preventDefault();
    essayer {
      setIsLoading(true); // définit le chargement sur vrai
      attendre la connexion (entrées);
      naviguer("/")
      
      
     
    } attraper (erreur) {
      setErr(err.response.data);
    }enfin {
      setIsLoading(faux); // remet le chargement à false
    }
  } ;
       

    retour (
      <div className='login'>
      <div className="carte">
          <div className="gauche">
              <h1>SocialMica</h1>
              <p>
                  Rendre la connexion avec des amis facile et amusante
              </p>
              <span>Vous n'avez pas encore de compte ?</span>
               <Lien vers ="/s'inscrire">
               <bouton>S'inscrire</bouton>
               </Lien>
             
          </div>
          <div className="droite">
              <h1>Connexion</h1>
              <action de formulaire="">
                <input type="email" placeholder='email' name='email' onChange={handleChange}></input>
                <input type="password"placeholder='password' name='password' onChange={handleChange}/>
               {erreur && "adresse e-mail ou mot de passe invalide"}
               
               <button onClick={handleLogin} désactivé={isLoading}> {isLoading <Loading/> : "Connexion"}</button>
              
               
              </formulaire>
              </div>

      </div>
  </div>
}

exporter la connexion par défaut

Je ne comprends pas pourquoi cela ne fonctionne pas, une fois que l'utilisateur s'est connecté et que currentUser a stocké les données, la page de connexion s'actualise simplement sans redirection et je dois accéder à la page d'accueil manuellement. J'ai essayé de changer le navigateur vers ("/register") dans la fonction handleSubmit de la page de connexion et cela fonctionne bien, mais sans utiliser le navigateur('/')

Answer 1

Changez votre chemin /home 不仅仅是 / J'aime

{
    path:"/home",
    element: <Home />
},

Ça devrait bien fonctionner