[英]after reloading the page of a private route, the user is redirected to the login page. [react router]
I made a protected route with react router for authentication.我用反应路由器制作了一条受保护的路线以进行身份验证。 It redirects user to the blogs page after login/register.
它在登录/注册后将用户重定向到博客页面。 But when I refresh the blogs page, It takes me again to login page.
但是当我刷新博客页面时,我又回到了登录页面。 I want stay on the blogs page after refresh.
我想在刷新后留在博客页面上。 How should I do it?
我应该怎么做? I used react router hooks, firebase, react bootstrap
我使用了反应路由器挂钩,firebase,反应引导程序
<Route
path="/blogs"
element={
<RequireAuth>
<Blogs></Blogs>
</RequireAuth>
}
></Route>
RequireAuth - 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;
login page -登录页面 -
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;
You can put the part of navigating user to the previous page he originally wanted to access in an useEffect instead of in the handleSubmit function您可以将用户导航到他最初想访问的上一个页面的部分放在 useEffect 中,而不是放在 handleSubmit function 中
useEffect(() => {
if (user) {
navigate(from);
}
}, [from, navigate, user]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.