Shopify App/Nextjs：如何让 RoutePropagator 工作？

Question

如何在 Nextjs Shopify 应用程序中进行路由传播？

我正在构建一个带有 CLI 脚手架的 Shopify 应用程序，但在使用 Nextjs 路由器进行路由时遇到了问题。标准嵌入式应用程序实现不会更新 URL，因此需要 RoutePropagator 组件。

我实现了 Shopify 的 RoutePropagator 但出现错误 TypeError: Cannot read properties of undefined (reading 'pathname')

然后我发现 this 实现可用于更新 URL，但遇到了一个非常奇怪的动态 Urls 问题。

每当用户导航到动态 url 时，url 将更新为 url 中的 [id]。 Gif 示例：

缩小范围，下面的片段会导致上面的动态 url 问题：

import { useEffect, useContext } from "react";
import Router, { useRouter } from "next/router";
import { Context as AppBridgeContext } from "@shopify/app-bridge-react";
import { Redirect } from "@shopify/app-bridge/actions";
import { RoutePropagator as ShopifyRoutePropagator } from "@shopify/app-bridge-react";

const RoutePropagator = () => {
  const router = useRouter();
  const { route } = router;
  const appBridge = React.useContext(AppBridgeContext);

  // Subscribe to appBridge changes - captures appBridge urls
  // and sends them to Next.js router. Use useEffect hook to
  // load once when component mounted
  useEffect(() => {
    appBridge.subscribe(Redirect.Action.APP, ({ path }) => {
      Router.push(path);
    });
  }, []);

  return appBridge && route ? (
    <ShopifyRoutePropagator location={route} app={appBridge} />
  ) : null;
};

export default RoutePropagator;

如何让 URL 在用户浏览所有 url（包括动态 url）的应用程序时更新？

Answer 1

使用

const { asPath } = router

而不是 route，它会起作用！

Shopify App/Nextjs：如何让 RoutePropagator 工作？

Shopify App/Nextjs: How to get RoutePropagator to work?

shopify

reactjs

next.js

shopify-app