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
Anchor link to section titled "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 />
Anchor link to section titled "Import the Provider
and <RoutePropagator>
components. Only one Provider
is needed for your application. The following example assumes your app uses:
withRouter
enhancer fromreact-router