付款成功后重定向到儀表板

Question

這是我的 app.js 所有路線

      <Router>
        <Routes>
          <Route exact path="/" element={<Home />} />
          <Route element={<PrivateRoute />}>
            <Route exact path="/dashboard" element={<Dashboard />} />
            <Route exact path="/payment" element={<Payment />} />]
          </Route>
          <Route exact path="/login" element={<Login />} />
       </Routes>
      </Router>

這是我的 PrivateRoute 組件

function PrivateRoute({ fetchMe, ...props }) {
  const [type, setType] = useState("xxxxx");
  const isAuthenticated = localStorage.getItem("authToken");
  const navigate = useNavigate();
  const [lodar, setLodar] = useState(false);

  useEffect(() => {
    setLodar(false);
    if (isAuthenticated) {
      (async () => {
        const {
          value: { user },
        } = await fetchMe();
        console.log({ data: user.step1 });
        if (user.step === 1) {
          navigate("/payment");
        }
        setLodar(false);
      })();
    }
  }, []);

  return (
    <Spin indicator={antIcon} spinning={lodar}>
      {isAuthenticated ? (
        <>
          <Header type={type} setType={setType} />
          <Outlet context={[type, setType]} />
        </>
      ) : (
        <Navigate to="/login" />
      )}
    </Spin>
  );
}
export default PrivateRoute;

所以我在這里要做的是在注冊后始終將用戶重定向到“/付款”。 如果用戶在登錄后再次出現，那么它將再次將其重定向到支付頁面，因此我在我的數據庫user.step中保留一個標志並通過 PrivateRoute 組件上的 api 調用進行檢查。 問題是它在fetchUser api 調用之前加載“/dashboard”頁面，這不應該發生並且之前顯示一些 lodar。 我怎樣才能做到這一點？

有沒有更好的方法來做這件事，因為我總是要進行 api 調用？

請幫忙！！！

Answer 1

假設<Spin indicator={antIcon} spinning={lodar}>有條件地呈現加載微調器/指示器或包裝的children項，那么我認為問題只是初始lodar狀態值。 lodar狀態似乎從未切換為 true。

我建議從最初的true狀態開始，這樣在通過useEffect鈎子進行任何身份驗證檢查之前，組件不會在組件安裝時立即呈現Outlet或重定向。

例子：

function PrivateRoute({ fetchMe, ...props }) {
  const [type, setType] = useState("xxxxx");
  const isAuthenticated = localStorage.getItem("authToken");
  const navigate = useNavigate();
  const [lodar, setLodar] = useState(true); // <-- initially true

  useEffect(() => {
    setLodar(true); // <-- toggle true when starting async logic
    if (isAuthenticated) {
      (async () => {
        const {
          value: { user },
        } = await fetchMe();
        console.log({ data: user.step1 });
        if (user.step === 1) {
          navigate("/payment");
        }
        setLodar(false); // <-- clear loading when complete
      })();
    }
  }, []);

  return (
    <Spin indicator={antIcon} spinning={lodar}>
      {isAuthenticated ? (
        <>
          <Header type={type} setType={setType} />
          <Outlet context={[type, setType]} />
        </>
      ) : (
        <Navigate to="/login" />
      )}
    </Spin>
  );
}