首次导航后Host为空（Shopify App Bridge React v4.x.x）

问题原因 #

1. 重复App实例冲突：你同时使用useAppBridge()自动生成的实例，又手动通过Common.createApp()创建了另一个App实例。App Bridge v4.x通过CDN引入后，useAppBridge()会自动从页面meta和URL参数初始化正确的上下文（包括host），但手动创建的实例无法同步导航后的上下文状态，导致跳转后host丢失。
2. 混合导航方式断裂上下文：混用App Bridge的Redirect、React Router的useNavigate和原生锚点标签导航，会导致App Bridge无法捕获路由变化，无法维护嵌入式环境的host、origin等关键参数。
3. Redirect路径规范问题：使用Redirect.Action.APP时，若路径配置不符合App Bridge的相对路径要求，手动创建的实例无法自动关联当前host参数，进一步加剧上下文异常。

修复步骤 #

1. 移除手动App实例，统一使用useAppBridge提供的实例

删掉手动创建的Common.createApp()，直接用useAppBridge()返回的实例创建Redirect，确保上下文完全同步：

import { useAppBridge } from '@shopify/app-bridge-react';
import Index from './Index';
import { Redirect } from "@shopify/app-bridge/actions";
import { useRef, useEffect } from 'react';

export default function IndexWrapper() {
  const app = useAppBridge();
  const redirectRef = useRef(null);

  useEffect(() => {
    if (app) {
      redirectRef.current = Redirect.create(app);
    }
  }, [app]);

  return <Index app={app} redirect={redirectRef.current} />;
}

2. 统一导航方式，禁用非App Bridge导航

所有页面跳转必须通过App Bridge的Redirect完成，替换useNavigate和锚点标签：

• 替换useNavigate：

// 原useNavigate写法
// navigate('/dashboard');

// 改为App Bridge Redirect
this.props.redirect.dispatch(
  Redirect.Action.APP,
  '/dashboard' // 直接用相对路径，无需额外拼接版本前缀（若为路由前缀，需确保React Router已配置base路径）
);

• 替换锚点标签：

<!-- 原锚点标签 -->
<!-- <a href="/dashboard">Dashboard</a> -->

<!-- 改为React onClick触发Redirect -->
<button onClick={() => this.props.redirect.dispatch(Redirect.Action.APP, '/dashboard')}>Dashboard</button>

3. React Router场景下的上下文同步（可选）

如果必须使用React Router，需添加路由监听，确保App Bridge能同步路由变化：

import { useLocation } from 'react-router-dom';
import { useAppBridge } from '@shopify/app-bridge-react';
import { useEffect } from 'react';

function AppRouterSync() {
  const app = useAppBridge();
  const location = useLocation();

  useEffect(() => {
    if (app) {
      app.dispatch({
        type: 'APP::ROUTER::LOCATION_CHANGED',
        payload: { path: location.pathname },
      });
    }
  }, [app, location]);

  return null;
}

// 在App根组件中引入同步组件
function App() {
  return (
    <BrowserRouter>
      <AppRouterSync />
      {/* 其他路由组件 */}
    </BrowserRouter>
  );
}

4. 验证Redirect路径正确性

使用Redirect.Action.APP时，路径必须是相对于应用入口的相对路径，不能包含域名或完整URL。若应用有版本前缀，需确保该前缀已配置为React Router的base路径，让App Bridge能正确识别。

验证方法 #

1. 跳转后查看App Bridge日志，确认config.host不为空，origin保持https://admin.shopify.com
2. 测试首次加载、多次跳转、刷新等场景，确保所有参数始终一致

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