Mengapa mengubah hala ke halaman utama tidak mempunyai kesan apabila menggunakan React react-router dan useNavigate selepas log masuk?

Question

Selepas log masuk berjaya, saya mahu pengguna diubah hala ke halaman utama, saya menyimpan data permintaan api log masuk pengguna dalam pembolehubah yang dipanggil currentUser, jadi jika currentUser adalah benar, ia harus mengubah hala ke halaman utama. Beginilah cara saya mengendalikan permintaan log masuk:

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

  log masuk const = async (input) =>

  

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

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

    })
   setCurrentUser(res.data)
  }
  kembali (
    <AuthContext.Provider value={{ currentUser, login, updateUser}}>
      {anak-anak}
    </AuthContext.Provider>
  );
};

Laluan terlindung saya:

import { AuthContext } daripada './context/authContext'
fungsi Apl() {
  
  const {User semasa } = useContext(AuthContext);

 

  

 const Layout = ()=>{
  

  kembali(
    <div>
        <Navbar />
        <gaya div={{ paparan: "flex"
          <Bar Kiri />
          <gaya div={{ flex: 6 }}>
            <Alur keluar />
          </div>
          
        </div>
      </div>
  )
 }
 
 const ProtectedRoute = ({kanak-kanak}) =>{
  if(!currentUser){
    kembali <Navigasi ke="/log masuk" />
  }kembali kanak-kanak
  
}


  penghala const = createBrowserRouter([
   {
      laluan: "/",
      unsur: (
      <ProtectedRoute>
      <Susun atur/>
      
      </ProtectedRoute>
      ),
      kanak-kanak :[
        {
          laluan:"/",
          elemen: <Laman Utama />
        },{
          laluan:"/profile/:id",
          elemen:<Profil />
        }
      ]
    }, {
      laluan: "/log masuk",
      elemen: <Log masuk />,
    },
    {
      laluan: "/daftar",
      elemen: <Daftar />
    },
    
  ]);

  

  kembali (
    <div className="App">
       <RouterProvider router={router} />
    </div>
  )
}

eksport lalai App

我的登录页面：

const Log Masuk = () => {
  const [input, setInputs] = useState({
    e-mel: "",
    kata laluan: "",
  });
  const [err, setErr] = useState(null);
  const [isLoading, setIsLoading] = useState(false); // nyatakan pembolehubah untuk memuatkan pemutar


  const navigate = useNavigate()

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

  const handleLogin = tak segerak (e) => {
    e.preventDefault();
    cuba {
      setIsLoading(true); // tetapkan pemuatan kepada benar
      tunggu log masuk(input);
      navigasi("/")
      
      
     
    } tangkap (err) {
      setErr(err.response.data);
    }akhirnya {
      setIsLoading(false); // tetapkan pemuatan kembali kepada false
    }
  };
       

    kembali (
      <div className='log masuk'>
      <div className="kad">
          <div className="kiri">
              <h1>SocialMica</h1>
              <p>
                  Jadikan perhubungan dengan rakan mudah dan menyeronokkan
              </p>
              <span>Belum mempunyai akaun?</span>
               <Pautan ke="/daftar">
               <butang>Daftar</button>
               </Pautan>
             
          </div>
          <div className="kanan">
              <h1>Log masuk</h1>
              <tindakan borang="">
                <jenis input="e-mel" pemegang tempat='email' name='email' onChange={handleChange}></input>
                <jenis input="kata laluan"pemegang tempat='kata laluan' name='kata laluan' onChange={handleChange}/>
               {err && "e-mel atau kata laluan tidak sah"}
               
               <butang onClick={handleLogin} disabled={isLoading}> {isLoading ?
              
               
              </form>
              </div>

      </div>
  </div>
}

eksport Log Masuk lalai

Saya tidak faham mengapa ia tidak berfungsi, selepas pengguna log masuk dan currentUser mempunyai data yang disimpan, halaman log masuk hanya menyegarkan tanpa mengubah hala dan saya perlu mengakses halaman utama secara manual. Saya cuba menukar navigasi ke ("/daftar") dalam fungsi handleSubmit halaman log masuk dan ia berfungsi dengan baik, tetapi tidak menggunakan navigasi('/')

Answer 1

Ubah laluan anda /home 不仅仅是 / Sama seperti

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

Sepatutnya berfungsi dengan baik