• Plain JavaScript
  • React

History

Note

This is a legacy API. Use the latest version of the App Bridge History instead.

The History action set allows you to use the JavaScript History API to modify the top-level browser URL without navigating. Use the History action set to update the top-level browser URL to match your app.

You can use the history action in the following ways:

  1. Plain JavaScript
  2. React hook

Plain JavaScript

Anchor link to section titled "Plain JavaScript"

Example code

Anchor link to section titled "Example code"

Import the createApp function from @shopify/app-bridge and the History action from @shopify/app-bridge/actions. Then use the createApp function to create an app.

Note

In the following example, config is a valid App Bridge configuration object. Learn more about configuring App Bridge.

Push a new history entry containing the relative app path

Anchor link to section titled "Push a new history entry containing the relative app path"

The path is relative to the app origin and must be prefixed with a slash. Adding a history entry does not redirect the app.

Replace the current history entry with the relative app path

Anchor link to section titled "Replace the current history entry with the relative app path"

The path is relative to the app origin and must be prefixed with a slash. Replacing the history entry does not redirect the app:

Subscribe to actions

Anchor link to section titled "Subscribe to actions"

You can subscribe to actions dispatched through the specific history action set:

Subscribe to all history actions

Anchor link to section titled "Subscribe to all history actions"

You can subscribe to all history actions, regardless of which action sets trigger the actions:

React

Anchor link to section titled "React"

The useNavigationHistory hook enables you to modify the top-level browser URL to match your app location. It uses the browser history API and modifies the URL without navigating.

The useNavigationHistory hook accepts no props and returns push and replace methods.

Example code

Anchor link to section titled "Example code"

Note

When using the App Bridge React library, you need to wrap all of your App Bridge React code inside of a single App Bridge Provider.

Add a new location to the history stack with push.

Replace the current location in the history stack with replace.

Props

Anchor link to section titled "Props"

The useNavigationHistory hook does not accept any arguments. The APIs for the push and replace methods are as follows:

push

Anchor link to section titled "push"
Name Type Description Required
location string Path to add to history stack Yes

replace

Anchor link to section titled "replace"
Name Type Description Required
location string Path to replace current loaction in history stack Yes

On this page

  • Plain JavaScript
  • React