[英]after reloading the page of a private route, the user is redirected to the login page. [react router]
我用反應路由器制作了一條受保護的路線以進行身份驗證。 它在登錄/注冊后將用戶重定向到博客頁面。 但是當我刷新博客頁面時,我又回到了登錄頁面。 我想在刷新后留在博客頁面上。 我應該怎么做? 我使用了反應路由器掛鈎,firebase,反應引導程序
<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;
您可以將用戶導航到他最初想訪問的上一個頁面的部分放在 useEffect 中,而不是放在 handleSubmit function 中
useEffect(() => {
if (user) {
navigate(from);
}
}, [from, navigate, user]);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.