基于Shopify CLI 2的嵌入式应用：如何正确实现退出iframe？

问题根源 #

你把Exitiframe的逻辑合并到HomePage后，每次重定向到首页都会触发相同的重定向条件，导致页面一直在/?xxx和重定向逻辑之间循环，无法跳出。

最佳实现步骤 #

• 保留独立的Exitiframe组件，不要与HomePage合并
  Exitiframe是专门处理Shopify iframe退出逻辑的独立页面，和首页业务逻辑分离才能避免冲突。

• 配置react-router-dom路由规则
  在你的路由配置文件中，为Exitiframe添加独立路由：

  // 示例：routes.jsx 或 App.jsx
  import { Routes, Route } from 'react-router-dom';
  import HomePage from './HomePage';
  import Exitiframe from './Exitiframe';
  
  function App() {
    return (
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/exitiframe" element={<Exitiframe />} />
      </Routes>
    );
  }
  
  export default App;
  

• 保留后端的原始重定向逻辑
  不要修改后端的重定向路径，继续使用官方文档中的写法：

  return res.redirect(`/exitiframe?${queryParams}`);
  

• 在Exitiframe组件中完成逻辑后跳转首页
  在Exitiframe组件里，执行完Shopify的iframe退出逻辑后，再用react-router的useNavigate跳转到首页：

  // Exitiframe.jsx
  import { useEffect } from 'react';
  import { useNavigate, useSearchParams } from 'react-router-dom';
  import Shopify from '@shopify/app-bridge';
  
  function Exitiframe() {
    const navigate = useNavigate();
    const [searchParams] = useSearchParams();
  
    useEffect(() => {
      // 初始化App Bridge
      const app = Shopify.AppBridge.create({
        apiKey: process.env.REACT_APP_SHOPIFY_API_KEY,
        shopOrigin: searchParams.get('shop'),
      });
  
      // 执行退出iframe逻辑
      const redirect = Shopify.AppBridge.actions.Redirect.create(app);
      redirect.dispatch(Shopify.AppBridge.actions.Redirect.Action.APP);
  
      // 逻辑完成后跳转首页
      setTimeout(() => {
        navigate('/');
      }, 500);
    }, [navigate, searchParams]);
  
    return <div>正在跳转...</div>;
  }
  
  export default Exitiframe;
  

• 排查首页的重触发逻辑
  检查HomePage中是否存在只要有query参数就触发重定向的逻辑，如果有，需要添加判断：只有当需要执行iframe退出操作时，才重定向到/exitiframe，否则正常渲染首页内容。

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