重新加载私有路由页面后，会将用户重定向到登录页面.(路由器)反应

Question

我用react router创建了一个受保护的路由来进行认证。它将用户重定向到登录/注册后的博客页面。但是当我刷新博客页面时，它又带我到登录页面。我想在刷新后留在博客页面上。我该怎么做呢?我使用了react router hooks, firebase, react bootstrap

<Route
path="/blogs"
element={
<RequireAuth>
<Blogs></Blogs>
</RequireAuth>
}
></Route>

RequireAuth——

import React from "react";
import { useAuthState } from "react-firebase-hooks/auth";
import { Navigate, useLocation } from "react-router-dom";
import auth from "../../firebase.init";
function RequireAuth({ children }) {
const [user] = useAuthState(auth);
let location = useLocation();
if (!user) {
return <Navigate to="/login" state={{ from: location }} replace />;
}
return children;
}
export default RequireAuth;

登录页面-

import "./Login.css";
import React, { useRef } from "react";
import { Form } from "react-bootstrap";
import {
useSendPasswordResetEmail,
useSignInWithEmailAndPassword,
} from "react-firebase-hooks/auth";
import auth from "../../firebase.init";
import { toast } from "react-toastify";
import { Link, useLocation, useNavigate } from "react-router-dom";
import SocialLogin from "../SocialLogin/SocialLogin";
import Loading from "../../Shared/Loading/Loading";
const Login = () => {
const emailRef = useRef("");
const passwordRef = useRef("");
let navigate = useNavigate();
let location = useLocation();
let from = location.state?.from?.pathname || "/";
let errorElement;
const [signInWithEmailAndPassword, user, loading, error] =
useSignInWithEmailAndPassword(auth);
const [sendPasswordResetEmail] = useSendPasswordResetEmail(auth);
if (loading) {
return <Loading></Loading>;
}
if (user) {
}
if (error) {
errorElement = <p className="text-danger">Error: {error?.message}</p>;
}
const handleSubmit = async (event) => {
event.preventDefault();
const email = emailRef.current.value;
const password = passwordRef.current.value;
await signInWithEmailAndPassword(email, password);
navigate(from, { replace: true });
};
const resetPassword = async () => {
const email = emailRef.current.value;
if (email) {
await sendPasswordResetEmail(email);
toast("Sent email");
} else {
toast("Please enter your email");
}
};
return (
<div className="login-form container w-50 mx-auto">
<h2 className="text-center mt-3">Please Login</h2>
<Form onSubmit={handleSubmit}>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Control
ref={emailRef}
type="email"
placeholder="Your email"
className="rounded-0"
required
/>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Control
ref={passwordRef}
type="password"
placeholder="Your Password"
className="rounded-0"
required
/>
</Form.Group>
<input
className="btn btn-dark w-100 d-block mx-auto mb-2"
type="submit"
value="Login"
/>
</Form>
{errorElement}
<p className="my-0">
New to Webster Warehouse ?{" "}
<Link to="/register" className="text-decoration-none">
Register
</Link>
</p>
<p className="my-0">
Forget Password ?
<button
onClick={resetPassword}
className="btn btn-link border-0 text-decoration-none"
>
Reset Password
</button>
</p>
<SocialLogin></SocialLogin>
</div>
);
};
export default Login;

Answer 1

你可以把用户导航到他最初想要访问的前一个页面的部分放在useEffect中，而不是在handlessubmit函数中

useEffect(() => {
if (user) {
navigate(from);
}
}, [from, navigate, user]);