当我在 react router dom v6 中使用导航时防止组件渲染

Question

hi i'm doing protected routes using react router v6 it is redirecting fine but let's say i'm in /login and i'm not authenticated and i want to go to /dashboard here /dashboard will be rendered for some few miliseconds (i can see it ) then i will be redirected to /login how can i prevent that rendering. here's my code:

import { useEffect, useState } from "react";
import { Route, useNavigate } from "react-router-dom";
import { Auth } from "aws-amplify";

const protectedRoute = (Comp, route = "/login") => (props) => {
  const navigate = useNavigate();
  const checkAuthState = async () => {
    try {
      await Auth.currentAuthenticatedUser();
      console.log("React Router user authenticated ");
    } catch (err) {
      console.log("React Router we have an error");
      navigate(route);
    }
  };
  useEffect(() => {
    checkAuthState();
  });
  return <Comp {...props} />;
};

export default protectedRoute;

this is how i ordered my routes in App.js

 <Router>
      <Routes>
        <Route path="/" element={<Navigate to="/login" replace={true} />} />
        <Route path="/login" element={<Login />} />
        <Route path="dashboard/*" element={<Dashboard />} />
        <Route path="/signup" element={<Signup />} />
        <Route path="RecoverPassword" element={<RecoverPassword />} />
        <Route path="resetPassword" element={<ResetPassword />} />
        <Route path="verifycode" element={<VerifyCode />} />
        <Route path="policy" element={<>this is policy</>} />
      </Routes>
    </Router>

Answer 1

You can create a flag to tell if the checking is don or not, while that you can show some loader to the user instead of the component.

 onst protectedRoute = (Comp, route = "/login") => (props) => { const navigate = useNavigate(); const loading = useState(false); const checkAuthState = async () => { // start checking, show loader setLoading(true) try { await Auth.currentAuthenticatedUser(); console.log("React Router user authenticated "); } catch (err) { console.log("React Router we have an error"); navigate(route); } // end checking, hide loader setLoading(false) }; useEffect(() => { checkAuthState(); }, []); if(loading) { return "loading..." } return <Comp {...props} />; };

Answer 2

i got it you know what was happening is that useEffect will be executed when my component mounts (i returned redirection component so it will be rendered ) what i did is putting my component into a state initialized to empty <></> then when my protected route mounts i change the state to what i want to render

import { useEffect, useState } from "react";
import { Route, useNavigate } from "react-router-dom";
import { Auth } from "aws-amplify";

const protectedRoute = (Comp, route = "/login") => (props) => {
  const navigate = useNavigate();
  const [corps, setCorps] = useState(<></>);

  const checkAuthState = async () => {
    try {
      await Auth.currentAuthenticatedUser();
      console.log("React Router user authenticated ");
    } catch (err) {
      console.log("React Router we have an error");
      return navigate(route);
    }
  };
  useEffect(() => {
    checkAuthState();
    setCorps(<Comp {...props} />);
  }, []);

  return corps;
};

export default protectedRoute;