Warum hat die Umleitung zur Homepage keine Auswirkung, wenn React React-Router und UseNavigate nach der Anmeldung verwendet werden?

Question

Nach erfolgreicher Anmeldung möchte ich, dass der Benutzer zur Startseite weitergeleitet wird. Ich speichere die Benutzeranmelde-API-Anforderungsdaten in einer Variablen namens „currentUser“. Wenn „currentUser“ also „true“ ist, sollte er zur Startseite weitergeleitet werden. So gehe ich mit Anmeldeanfragen um:

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

  const login = async (Eingaben) =>

  

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

  useEffect(() => {
    localStorage.setItem("Benutzer", JSON.stringify(currentUser));
  }, [aktuellerBenutzer,login]);
 
  const updateUser = async () =>{
    const user = JSON.parse(localStorage.getItem("users"))
    const res= waiting axios.get("https://micacarballo-social-media-api.onrender.com/api/v1/users/me/",{
 Überschriften: {
  Autorisierung: `jwt ${user.token}`
 }

    })
   setCurrentUser(res.data)
  }
  zurückkehren (
    <AuthContext.Provider value={{ currentUser, login, updateUser}}>
      {Kinder}
    </AuthContext.Provider>
  );
};

Meine geschützten Routen:

import { AuthContext } from './context/authContext'
Funktion App() {
  
  const { currentUser } = useContext(AuthContext);

 

  

 const Layout = ()=>{
  

  zurückkehren(
    <div>
        <Navigationsleiste />
        <div style={{ display: "flex" }}>
          <LeftBar />
          <div style={{ flex: 6 }}>
            <Auslass />
          </div>
          
        </div>
      </div>
  )
 }
 
 const ProtectedRoute = ({children}) =>{
  if(!currentUser){
    return <Navigieren zu="/login" />
  }Kinder zurückbringen
  
}


  const router = createBrowserRouter([
   {
      Pfad: "/",
      Element: (
      <ProtectedRoute>
      <Layout/>
      
      </ProtectedRoute>
      ),
      Kinder :[
        {
          Pfad:"/",
          Element: <Home />
        },{
          path:"/profile/:id",
          element:<Profil />
        }
      ]
    }, {
      Pfad: "/login",
      Element: <Login />,
    },
    {
      Pfad: "/register",
      Element: <Register />
    },
    
  ]);

  

  zurückkehren (
    <div className="App">
       <RouterProvider router={router} />
    </div>
  )
}

Standard-App

exportieren

我的登录页面:

const Login = () => {
  const [Eingaben, setInputs] = useState({
    E-Mail: "",
    Passwort: "",
  });
  const [err, setErr] = useState(null);
  const [isLoading, setIsLoading] = useState(false); // Statusvariable zum Laden des Spinners


  const navigation = useNavigate()

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

  const handleLogin = async (e) => {
    e.preventDefault();
    versuchen {
      setIsLoading(true); // Laden auf true setzen
      Warten Sie auf die Anmeldung (Eingaben);
      navigieren("/")
      
      
     
    } Catch (Err) {
      setErr(err.response.data);
    }Endlich {
      setIsLoading(false); // Laden wieder auf „false“ setzen
    }
  };
       

    zurückkehren (
      <div className='login'>
      <div className="card">
          <div className="left">
              <h1>SocialMica</h1>
              <p>
                  Machen Sie es einfach und unterhaltsam, mit Freunden in Kontakt zu treten
              </p>
              <span>Sie haben noch kein Konto?</span>
               <Link zu="/register">
               <button>Registrieren</button>
               </Link>
             
          </div>
          <div className="right">
              <h1>Anmelden</h1>
              <form action="">
                <input type="email" placeholder='email' name='email' onChange={handleChange}></input>
                <input type="password"placeholder='password' name='password' onChange={handleChange}/>
               {err && "ungültige E-Mail-Adresse oder ungültiges Passwort"}
               
               <button onClick={handleLogin} deaktiviert={isLoading}>
              
               
              </form>
              </div>

      </div>
  </div>
}

Standard-Login exportieren

Ich verstehe nicht, warum es nicht funktioniert. Nachdem sich der Benutzer angemeldet hat und der aktuelle Benutzer die Daten gespeichert hat, wird die Anmeldeseite einfach ohne Umleitung aktualisiert und ich muss manuell auf die Homepage zugreifen. Ich habe versucht, die Navigation in der Funktion „handleSubmit“ der Anmeldeseite in („/register“) zu ändern, und es funktioniert einwandfrei, aber nicht mit der Funktion „navigate('/')

“

Answer 1

改变你的路径 /home 不仅仅是 / 就像

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

它应该正常工作