React 18 + React Router Dom v6环境下如何防止支付后成功页面被直接访问？

嘿，我看了你的代码，问题主要出在这几个地方：

1. 你的useEffect没有设置依赖数组，会导致每次组件渲染都反复执行，包括清理函数，这会造成不必要的跳转循环；
2. 仅依赖location.state不可靠——用户直接输入URL或者刷新页面时，state就会丢失，而且你原来的清理函数逻辑不对，反而会导致奇怪的跳转；
3. 直接返回null会造成页面白屏，体验不好。

这里给你调整后的代码，用sessionStorage来记录支付状态，确保只有完成支付的用户能访问一次Success页面，之后再访问就会被重定向到首页：

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

function Success() {
  const { state } = useLocation()
  const navigate = useNavigate()
  const [isValidAccess, setIsValidAccess] = useState(false)

  useEffect(() => {
    // 检查是否有支付成功标记，或者是从支付流程跳转过来（带state）
    const hasValidEntry = sessionStorage.getItem("paymentCompleted") === "true" || !!state;

    if (!hasValidEntry) {
      // 无有效访问凭证，直接重定向到首页
      navigate("/", { replace: true });
      return;
    }

    // 如果是首次从支付流程进入，设置会话级标记
    if (state) {
      sessionStorage.setItem("paymentCompleted", "true");
      setIsValidAccess(true);
    } else {
      // 如果是通过标记进入，确认访问有效
      setIsValidAccess(true);
    }

    // 用户离开页面时清除标记，确保下次直接访问无法进入
    return () => {
      sessionStorage.removeItem("paymentCompleted");
    };
  }, [state, navigate]);

  // 加载或无效访问时显示过渡提示
  if (!isValidAccess) {
    return <div>Redirecting...</div>;
  }

  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

关键修改说明： #

• 用sessionStorage做状态持久化：location.state只存在于内存中，刷新或直接访问就会消失，而sessionStorage会在当前会话（标签页）中保留，关闭标签页自动清除，刚好符合“仅允许支付后访问一次”的需求；
• 修正useEffect逻辑：添加了依赖数组[state, navigate]，避免无限循环；组件卸载时清除sessionStorage标记，用户离开后再访问就没凭证了；
• 优化用户体验：添加了isValidAccess状态，避免返回null导致白屏，显示重定向提示；用state?.email做可选链，防止意外报错；

另外要注意：在你跳转到Success页面的地方（比如PayPal支付成功的回调），一定要用navigate("/success", { state: { email: 用户邮箱 } })这种方式传递state，这样首次进入时会自动设置sessionStorage标记。

内容的提问来源于stack exchange，提问作者KaMZaTa