<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}}>
{children}
</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 /> },它应该正常工作