after reloading the page of a private route, the user is redirected to the login page. [react router]

Question

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

<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;

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;

Answer 1

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(() => {
    if (user) {
      navigate(from);
    }
  }, [from, navigate, user]);