Shopify AppBridge navigationMenu.set({active: settings}) 失效求助

你遇到的问题是因为在App Bridge 3.x版本中，NavigationMenu.set()方法的active参数不能直接传AppLink实例，而是需要传入对应菜单项的destination字符串值。

错误原因 #

App Bridge 3.x对NavigationMenu的API做了调整，active属性要求传入的是菜单项的目标路径（即你创建AppLink时指定的destination），而非AppLink对象本身。你之前传入settings这个AppLink实例，组件无法识别，所以无法激活对应菜单。

修正后的代码 #

const app = createApp({
  apiKey: this.apiKey,
  host: this.host,
});

const dashboard = AppLink.create(app, {
  label: 'Dashboard',
  destination: '/app',
});

const settings = AppLink.create(app, {
  label: 'Settings',
  destination: '/app/settings',
});

const navigationMenu = NavigationMenu.create(app, {
  items: [dashboard, settings],
});

// 改为传入destination字符串
navigationMenu.set({active: '/app/settings'})

额外注意事项 #

• 如果你的应用是单页应用（SPA），需要在路由切换时同步调用navigationMenu.set()，传入当前路由对应的destination值，保持菜单激活状态和路由一致。
• 确保destination的值和实际路由完全匹配（包括开头的斜杠、路径层级），大小写也要一致。

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