RoutePropagator

When a user navigates inside an embedded app, the URL of the embedded app iframe changes. If the user reloads the page, then the navigation isn't reflected in the URL of the parent page.

RoutePropagator lets you synchronize a Shopify embedded app's URL with the parent page.

You can use RoutePropagator as a hook (useRoutePropagation) or a component (<RoutePropagator />). The package can be used with any routing solution.

Both the hook and component versions of this library needs to be mounted inside the Provider component and take the same location parameter:

You can also use the App Bridge History API to keep the parent URL in sync manually.

useRoutePropagation

Import the Provider and useRoutePropagation hook. Only one Provider is needed for your application. The following example assumes your app uses the withRouter enhancer from react-router.

<RoutePropagator />

Import the Provider and <RoutePropagator> components. Only one Provider is needed for your application. The following example assumes your app uses:

• withRouter enhancer from react-router