如何在React私有路由组件中通过React Router获取上一访问URL

以下是三种可靠的实现方案，结合你的React Router私有路由组件进行适配：

方法1：在Stripe返回URL中添加查询参数（最推荐） #

Stripe客户门户支持自定义返回URL，你可以在URL末尾拼接查询参数（如?from_stripe=1），用户从Stripe返回时，应用可通过React Router读取该参数触发逻辑。

实现步骤： #

1. 在Stripe后台配置客户门户的返回URL，例如：https://your-app.com/your-return-path?from_stripe=1
2. 在AppPrivateRoute组件中添加参数检查逻辑：

// React
import React, { useEffect, useState } from 'react';
import { Navigate, Outlet, useLocation, useNavigate } from 'react-router';
import { useSearchParams } from 'react-router-dom'; // 新增导入
// Redux
import { useAppSelector } from '../../redux-store/hooks';
import LoadingComponent from '../application/LoadingComponent';

interface Props {}

const AppPrivateRoute: React.FC<Props> = () => {
  // React Router
  const navigate = useNavigate();
  const location = useLocation();
  const [searchParams] = useSearchParams(); // 获取查询参数
  // Redux
  const currentUser = useAppSelector((state) => state.auth.currentUser);
  const authenticating = useAppSelector((state) => state.auth.authenticating);

  // 检查是否来自Stripe客户门户并执行逻辑
  useEffect(() => {
    const fromStripe = searchParams.get('from_stripe');
    if (fromStripe === '1' && currentUser?.authenticated) {
      // 这里写入你的特定逻辑，比如刷新用户订阅数据、显示提示信息等
      console.log('用户从Stripe客户门户返回');
      // 可选：移除查询参数，避免刷新页面重复触发逻辑
      searchParams.delete('from_stripe');
      navigate({ search: searchParams.toString() }, { replace: true });
    }
  }, [searchParams, currentUser, navigate]);

  console.log('private route', currentUser);
  console.log('private route', authenticating);

  return authenticating
    ? <LoadingComponent action={'Authenticating'} />
    : currentUser?.authenticated
      ? <Outlet />
      : <Navigate to='/' />;
};

export default AppPrivateRoute;

方法2：利用React Router的state传递（适用于内部跳转触发Stripe的场景） #

如果是从应用内部页面跳转至Stripe门户，可在跳转时通过React Router的state标记来源，用户返回时读取该状态：

实现步骤： #

1. 跳转至Stripe的触发代码（如按钮点击事件）：

const handleOpenStripePortal = () => {
  // 标记即将跳转至Stripe的状态
  navigate('/stripe-redirect', { 
    state: { isGoingToStripe: true },
    replace: true
  });
  // 跳转到Stripe客户门户（需提前通过Stripe API获取门户链接）
  window.location.href = stripePortalUrl;
};

2. 在AppPrivateRoute中检查返回状态：

useEffect(() => {
  const wasGoingToStripe = location.state?.isGoingToStripe;
  if (wasGoingToStripe && currentUser?.authenticated) {
    // 执行特定逻辑
    console.log('用户从Stripe客户门户返回');
    // 清除状态，避免后续路由跳转携带该标记
    navigate(location.pathname, { replace: true, state: {} });
  }
}, [location.state, currentUser, navigate]);

方法3：检查document.referrer（可靠性较低） #

document.referrer可获取上一页URL，但受浏览器隐私设置或跨域策略影响，可能无法完整获取Stripe域名信息，仅作为备选方案：

useEffect(() => {
  const referrer = document.referrer;
  if (referrer.includes('checkout.stripe.com') && currentUser?.authenticated) {
    // 执行特定逻辑
    console.log('用户从Stripe客户门户返回');
  }
}, [currentUser]);

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