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

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