Shopify中ResourceList列表项添加链接后跳转失效如何解决

常见故障原因 #

• 路径配置错误：当前使用的是相对路径products/${id}，如果当前页面不在应用根路由下，跳转路径会叠加当前页面路径，导致404
• 路由规则缺失：应用没有配置/products/:id对应的路由规则，直接访问该路径也无法打开页面
• extractIdFromGid输出异常：传入的gid不符合gid://shopify/Product/xxx的标准格式，导致提取的ID错误
• Polaris组件配置错误：ResourceList.Item属性名写错，或者绑定的onClick事件阻止了默认跳转行为
• Shopify App Bridge配置异常：没有正确配置App Bridge的导航能力，导致跳转指向Shopify后台域名而非应用自身域名

排查步骤 #

1. 校验生成的URL是否正确：在useMemo逻辑中添加日志打印，确认生成的URL路径、提取的商品ID是否符合预期

const productItems = useMemo( () => {
  const items = products.map(
      ({ id, title, featuredImage }) => {
          const productId = extractIdFromGid(id)
          const url = `/products/${productId}`
          console.log('生成的商品跳转地址：', url) // 校验这里的输出是否符合预期
          return {
              id,
              title:title,
              url,
              icon: <Thumbnail size="small" source={featuredImage?.originalSrc || ImageMajor}/>
          }
      }
  );
  return items
}, [products] );

2. 校验路由配置：直接在浏览器地址栏输入你预期的商品详情页完整地址，确认能否正常打开，如果打不开就是路由规则配置问题
3. 检查ResourceList配置：确认给ResourceList.Item传的跳转属性是url而非其他名称，同时没有配置阻止默认跳转的onClick逻辑
4. 检查App Bridge配置：确认项目中AppProvider已经正确配置apiKey、host等必填参数，已经引入了App Bridge的路由相关能力

对应解决方法 #

• 路径错误：给路径前缀加/改为根路径绝对路径，url: /products/${extractIdFromGid(id)}``
• 路由缺失：在路由配置中添加对应规则，比如用react-router时添加：

<Route path="/products/:id" element={<ProductDetailPage />} />

• App Bridge跳转异常：可以不用url属性，改用onClick配合App Bridge的useNavigate实现跳转：

import { useNavigate } from '@shopify/app-bridge-react';

// 组件内
const navigate = useNavigate();

// 生成item的时候配置onClick
const productItems = useMemo( () => {
  return products.map(
      ({ id, title, featuredImage }) => ({
          id,
          title:title,
          icon: <Thumbnail size="small" source={featuredImage?.originalSrc || ImageMajor}/>,
          onClick: () => navigate(`/products/${extractIdFromGid(id)}`)
      })
  );
}, [products] );

内容的提问来源于stack exchange，提问作者M Gogul Saravanan