CODEWITHSUNDEEP
reactjsnext.jsshopifyshopify-app
InquisitiveTom
InquisitiveTom

Reputation: 483

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

How do I get route propagation working in a Nextjs Shopify app?

I'm building a Shopify App scaffolded with the CLI and have issues with routing using the Nextjs router. The standard embedded app implementation does not update the URL so a RoutePropagator component is needed.

I implemented Shopify's RoutePropagator but got the error TypeError: Cannot read properties of undefined (reading 'pathname')

Then I found this implementation which works for updating the URL, but runs into a really strange issue for Dynamic Urls.

Whenever a user navigated to a dynamic url, the url would update with [id] in the url. Gif example:

enter image description here

Narrowing it down, the below snipped causes the above dynamic url issue:

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;

How do I get the URL to update as the user navigates through the application for all urls (including dynamic urls)?

Upvotes: 0

Views: 809

Answers (1)

Oliver Levay
Oliver Levay

Reputation: 46

Use

const { asPath } = router

instead of route and it's gonna work!

Upvotes: 2

Related Questions