如何在Remix开发的Shopify App中通过App Bridge跳转到套餐页面？

1. 用App Bridge的Redirect组件实现跳转（官方推荐方式） #

Shopify Admin内嵌应用中跳转Admin页面，必须使用App Bridge提供的Redirect工具，不能直接用普通<Link>或自定义协议链接。步骤如下：

• 先导入所需的App Bridge工具：

import { useAppBridge } from "@shopify/app-bridge-react";
import { Redirect } from "@shopify/app-bridge/actions";

2. 实现页面加载时自动跳转 #

如果要用户访问应用就直接跳转到定价套餐页面，在你的入口路由组件（比如routes/app/_index.jsx）中添加如下逻辑：

export default function AppIndex() {
  const app = useAppBridge();

  useEffect(() => {
    if (app) {
      // 构造正确的Admin定价页面URL
      const pricingUrl = `/store/${storeHandle}/charges/${appHandle}/pricing_plans`;
      // 触发跳转，使用APP_ADMIN路由类型
      Redirect.dispatch(app, Redirect.Action.APP_ADMIN, pricingUrl);
    }
  }, [app, storeHandle, appHandle]);

  // 可返回加载提示，跳转触发后会很快切换页面
  return <div>Redirecting to pricing plans...</div>;
}

注意：storeHandle和appHandle需要从应用上下文或请求中获取（比如Remix的loader里从Shopify会话提取）。

3. 修正导航栏的Plans链接 #

如果要保留导航栏的Plans入口，不能用普通<Link>，要改成点击时触发App Bridge跳转：

import { useAppBridge } from "@shopify/app-bridge-react";
import { Redirect } from "@shopify/app-bridge/actions";

function PlansLink({ storeHandle, appHandle }) {
  const app = useAppBridge();

  const handleClick = () => {
    const pricingUrl = `/store/${storeHandle}/charges/${appHandle}/pricing_plans`;
    Redirect.dispatch(app, Redirect.Action.APP_ADMIN, pricingUrl);
  };

  return <button onClick={handleClick} type="button">Plans</button>;
}

// 在导航栏中使用
<ui-nav-menu>
  <Link to="/app/sections">Sections</Link>
  <Link to="/app/bundles">Bundles</Link>
  {/* ...其他导航链接 */}
  <PlansLink storeHandle={storeHandle} appHandle={appHandle} />
</ui-nav-menu>

关键说明 #

• 原方式无效原因：shopify://协议并非Shopify官方推荐的内嵌应用跳转方式，App Bridge的Redirect会确保跳转在Shopify Admin上下文内完成，避免跨域或环境适配问题。
• 确保参数正确：storeHandle和appHandle需从Shopify会话或请求参数中正确获取，再传递给组件使用。

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