<p>成功登入後，我希望使用者被重新導向到主頁，我將使用者登入的api請求資料儲存在一個名為currentUser的變數中，所以如果currentUser為true，它應該重定向到主頁。
這是我處理登入請求的方式：</p>
<pre class="brush:php;toolbar:false;">export const AuthContextProvider = ({ children }) => {
const [currentUser, setCurrentUser] = useState(
JSON.parse(localStorage.getItem("users")) || null
);
const login = async (inputs) => {
const res= await axios.post("https://micacarballo-social-media-api.onrender.com/api/v1/auth/login",inputs,{
})
setCurrentUser(res.data)
};
useEffect(() => {
localStorage.setItem("users", JSON.stringify(currentUser));
}, [currentUser,login]);
const updateUser = async () =>{
const user = JSON.parse(localStorage.getItem("users"))
const res= await axios.get("https://micacarballo-social-media-api.onrender.com/api/v1/users/me/",{
headers: {
Authorization: `jwt ${user.token}`
}
})
setCurrentUser(res.data)
}
return (
<AuthContext.Provider value={{ currentUser, login , updateUser}}>
{孩子}
</AuthContext.Provider>
);
};</pre>
<p>我的受保護的路由：</p>
<pre class="brush:php;toolbar:false;">import { AuthContext } from './context/authContext'
function App() {
const { currentUser } = useContext(AuthContext);
const Layout = ()=>{
return(
<div >
<Navbar />
<div style={{ display: "flex" }}>
<LeftBar />
<div style={{ flex: 6 }}>
<Outlet />
</div>
</div>
</div>
）
}
const ProtectedRoute = ({children}) =>{
如果（！當前使用者）{
return <導航到=“/login” >>
}回傳孩子
}
const 路由器 = createBrowserRouter([
{
路徑：“/”，
元素： （
<受保護的路由>
<佈局/>
</受保護的路由>
),
孩子 ：[
{
路徑：“/”，
元素：<首頁/>
},{
路徑：“/profile/:id”，
元素：<設定檔/>>
}
]
}, {
路徑：“/登入”，
元素：<登入/>，
},
{
路徑：“/註冊”，
元素：<註冊>>
},
]);
返回 （
）
}
匯出預設應用程式
<p>我的登入頁面：</p>
const Login = () =>; {
const [輸入，setInputs] = useState({
電子郵件：“”，
密碼：“”，
});
const [err, setErr] = useState(null);
const [isLoading, setIsLoading] = useState(false); // 用於載入微調器的狀態變數
常數導航 = useNavigate()
const handleChange = (e) =>; {
setInputs((prev) => ({ ...prev, [e.target.name]: e.target.value }));
};
const {登入} = useContext(AuthContext)
const handleLogin = async (e) =>; {
e.preventDefault();
嘗試 {
setIsLoading(true); // 將載入設為 true
等待登入（輸入）；
導航（“/”）
} 捕獲（錯誤）{
setErr(err.response.data);
}最後 {
setIsLoading(假); // 將載入設定回 false
}
};
返回 （
;
SocialMica
<p>
讓與朋友的聯繫變得輕鬆有趣
</p>
<span>還沒有帳號？</span>
<連結到=“/註冊”>
<按鈕>註冊
;
<div className="right">
<h1>Login</h1>
<form action="">
<input type="email" placeholder='email' name='email' onChange={handleChange}></input>
<input type="password"placeholder='password' name='password' onChange={handleChange}/>
{err && "invalid email or password"}
<button onClick={handleLogin} disabled={isLoading}> {isLoading ? <Loading/> : "Login"}</button>
</form>
</div>
</div>
</div> )
}
export default Login</pre>
<p>我不明白為什麼它不起作用，用戶登入並且currentUser儲存了資料後，登入頁面只會刷新而不會重定向，我必須手動訪問主頁。
我嘗試在登入頁面的handleSubmit函數中將navigate更改為("/register")，它可以正常工作，但不能使用navigate('/')</p>
改變你的路徑
/home不只是/就像{ path:"/home", element: <Home /> },它應該正常工作