History
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 with plain JavaScript or React hooks.
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.
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:
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"Add a new location to the history stack with push.
Replace the current location in the history stack with replace.
The useNavigationHistory hook does not accept any arguments. The APIs for the push and replace methods are as follows:
| Name | Type | Description | Required |
|---|---|---|---|
| location | string |
Path to add to history stack | Yes |
| Name | Type | Description | Required |
|---|---|---|---|
| location | string |
Path to replace current loaction in history stack | Yes |