如何防止支付后直接进入成功页面？

Question

我正在使用 React 18.0、React Router Dom (v6)，并且正在尝试实施 Paypal Checkout。它运作良好，付款后我将用户重定向到我的成功页面，其中包含用户的下载 link。问题是这个成功页面总是可以访问的。所以，我试图在结帐后立即允许访问。之后，用户应该被重定向到主页。

我试过这样做但没有成功:

import { useEffect } from "react"
import { useLocation, useNavigate } from "react-router-dom"
import { getInvoiceUrl } from "../services/invoiceService"

function Success() {
    // Get the state from navigate on the Checkout page
    let { state, pathname } = useLocation()
    const navigate = useNavigate()

    // Check the state in order to redirect the user to the homepage if the state is empty
    useEffect(() => {
        if (state === null || state === undefined) {
            navigate("/")
            return
        }
        // Clear the state after the user exits from the Success page
        return navigate(pathname, { replace: true })
    })

    if (state === null || state === undefined) {
        return
    }

    console.log("state:", state)
    return (
                  <>
                    <div>
                        Thank you!
                    </div>
                    <div>
                        Abbiamo appena inviato un'email a
                        <span>
                            {state.email}
                        </span>
                        con in allegato la tua ricevuta (per favore, controlla la cartella SPAM se non dovessi vederla).
                    </div>
                    <div>
                        Puoi anche scaricare la ricevuta facendo click qui:
                        <a download href={getInvoiceUrl()}>
                            Download
                        </a>
                    </div>
                  </>
    )
}

export default Success

Answer 1

哈哈，我只是创建了问题的整个场景，然后猜猜你没有什么 return 你需要什么 return null

错误：Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

试试这个

  let { state, pathname } = useLocation();
  const navigate = useNavigate();

  useEffect(() => {
    if (!state) {
      navigate("/");
    }

    return function cleanup() {
      navigate(pathname, { replace: true });
      navigate("/");
    };
  }, []);

  if (!state) {
    return null;
  }

  return (
      <div>
        Abbiamo appena inviato un'email a<span>{state.email}</span>
        con in allegato la tua ricevuta (per favore, controlla la cartella SPAM
        se non dovessi vederla).
      </div>
  );

Answer 2

对于 state === null || state === undefined 条件，您缺少 return 有效的 JSX。 Return null 此处向 React 指示没有任何内容可渲染。

function Success() {
  // Get the state from navigate on the Checkout page
  const { state } = useLocation();
  const navigate = useNavigate();

  // Check the state in order to redirect the user to the homepage if the state is empty
  useEffect(() => {
    if (!state) {
      navigate("/", { replace: true }); // <-- redirect to prevent access
      return;
    }
  });

  if (!state) {
    return null; // <-- return valid JSX
  }

  return ( ... );
}

或者，为了消除对 useEffect、return Navigate 组件的需求。

function Success() {
  // Get the state from navigate on the Checkout page
  const { state } = useLocation();

  if (!state) {
    return <Navigate to="/" replace />; // <-- return Redirect
  }

  return ( ... );
}

如何防止支付后直接进入成功页面？

How to prevent direct access to success page after the payment?

paypal

reactjs

react-router-dom