Shopify Hydrogen中重定向路由时如何传递数据至目标组件？

下面提供两种可行的实现方式，都是Hydrogen中常用的做法：

方案1：通过URL查询参数传递状态 #

这是最直接的实现方式，重定向时在URL后拼接状态参数，Home组件读取后触发弹窗。

修改/account路由的重定向代码 #

// Redirect to login if no custom access token found
if (!customerAccessToken) {
  return response.redirect('/?authError=unauthorized'); // 拼接查询参数标记未授权状态
}

在Home组件中处理提示逻辑（客户端组件） #

import { useSearchParams, useEffect, useState } from 'react';

export default function Home() {
  const [searchParams] = useSearchParams();
  const [showAlert, setShowAlert] = useState(false);

  useEffect(() => {
    const authError = searchParams.get('authError');
    if (authError === 'unauthorized') {
      setShowAlert(true);
      // 3秒后自动隐藏弹窗
      setTimeout(() => setShowAlert(false), 3000);
      // 可选：移除URL中的参数，避免刷新页面重复显示
      window.history.replaceState({}, document.title, window.location.pathname);
    }
  }, [searchParams]);

  return (
    <div>
      {/* 首页原有内容 */}
      {showAlert && (
        <div style={{
          position: 'fixed',
          top: '20px',
          right: '20px',
          padding: '12px 20px',
          backgroundColor: '#dc3545',
          color: '#fff',
          borderRadius: '4px',
          zIndex: 9999
        }}>
          未授权访问，请登录后再尝试
        </div>
      )}
    </div>
  );
}

方案2：通过临时Cookie传递状态 #

如果不想在URL中暴露状态参数，可以用临时Cookie存储状态，客户端读取后显示弹窗并立即清除Cookie。

修改/account路由的服务器端代码 #

// Redirect to login if no custom access token found
if (!customerAccessToken) {
  const redirectRes = response.redirect('/');
  // 设置有效期5秒的临时Cookie，确保弹窗显示后自动过期
  redirectRes.headers.set(
    'Set-Cookie',
    'auth_error=unauthorized; Path=/; Max-Age=5; HttpOnly=false; SameSite=Lax'
  );
  return redirectRes;
}

在Home组件中处理提示逻辑（客户端组件） #

import { useEffect, useState } from 'react';

export default function Home() {
  const [showAlert, setShowAlert] = useState(false);

  useEffect(() => {
    // 读取Cookie中的状态
    const authError = document.cookie
      .split('; ')
      .find(row => row.startsWith('auth_error='))
      ?.split('=')[1];

    if (authError === 'unauthorized') {
      setShowAlert(true);
      setTimeout(() => setShowAlert(false), 3000);
      // 立即清除Cookie，避免重复触发
      document.cookie = 'auth_error=; Path=/; Max-Age=0';
    }
  }, []);

  return (
    <div>
      {/* 首页原有内容 */}
      {showAlert && (
        <div style={{
          position: 'fixed',
          top: '20px',
          right: '20px',
          padding: '12px 20px',
          backgroundColor: '#dc3545',
          color: '#fff',
          borderRadius: '4px',
          zIndex: 9999
        }}>
          未授权访问，请登录后再尝试
        </div>
      )}
    </div>
  );
}

两种方案对比 #

• 方案1：实现简单，无需额外处理Cookie，但URL会短暂显示参数，适合对URL美观要求不高的场景。
• 方案2：URL无变化，体验更流畅，但需要处理Cookie的读写逻辑，适合注重页面整洁的场景。

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