當我在 react router dom v6 中使用導航時防止組件渲染

Question

嗨，我正在使用 react router v6 做受保護的路由，它重定向正常，但假設我在 /login 中並且我沒有經過身份驗證，我想 go 到 /dashboard here /dashboard 將呈現幾毫秒（我可以看到它）然后我將被重定向到 /login 我如何才能阻止該渲染。 這是我的代碼：

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;

這就是我在 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

您可以創建一個標志來告訴是否進行檢查，同時您可以向用戶而不是組件顯示一些加載程序。

 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

我明白了，你知道發生了什么事，當我的組件掛載時 useEffect 將被執行（我返回了重定向組件，因此它將被渲染）我所做的是將我的組件放入一個初始化為空 <></> 的 state 然后當我protected route mounts 我將 state 更改為我想要呈現的內容

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;