• Plain JavaScript
  • React

Redirect

The Redirect action set allows you to modify the top-level browser URL. Use the Redirect action set to navigate within your app, or to redirect users elsewhere in the Shopify admin or on the web.

You can use the redirect action set 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 Redirect 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.

Redirect to a relative path in the app

Anchor link to section titled "Redirect to a relative path in the app"

Redirect to a local app path. The path must be prefixed with a slash and is treated as relative to the app origin:

Redirect to an absolute URL outside of the app and outside of Shopify admin.

Anchor link to section titled "Redirect to an absolute URL outside of the app and outside of Shopify admin."

Open in a new window

Anchor link to section titled "Open in a new window"

Add the newContext option (equivalent to <a target="_blank">):

Redirect to a relative path in Shopify admin

Anchor link to section titled "Redirect to a relative path in Shopify admin"

Redirect to the customers section in Shopify admin. The path must be prefixed with a slash.

Redirect to a named section in Shopify admin

Anchor link to section titled "Redirect to a named section in Shopify admin"

Redirect to the Products section in the Shopify admin:

Redirect to a specific resource in Shopify admin.

Anchor link to section titled "Redirect to a specific resource in Shopify admin."

Redirect to the collection with the ID 123 in the Shopify admin:

Redirect to create a product in Shopify admin.

Anchor link to section titled "Redirect to create a product in Shopify admin."

Redirect to {shopUrl}/admin/products/new in the Shopify admin:

Redirect to a product variant in Shopify admin.

Anchor link to section titled "Redirect to a product variant in Shopify admin."

Redirect to the collection with the id '123' in Shopify admin:

Redirect to create a new product variant in Shopify admin.

Anchor link to section titled "Redirect to create a new product variant in Shopify admin."

Redirect to {shopUrl}/admin/products/123/variants/new in the Shopify admin:

Subscribe to actions

Anchor link to section titled "Subscribe to actions"

You can subscribe to actions dispatched through the redirect action set:

Subscribe to all redirect actions

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

You can subscribe to all redirect actions within your app, regardless of which action sets trigger the actions:

Current restrictions

Anchor link to section titled "Current restrictions"

Query Params

The use of query params is not supported. All query params are removed from the path during the redirect.

React

Anchor link to section titled "React"

The useNavigate hook allows you to modify the top-level browser URL. You can use it to:

  • Navigate within your app
  • Redirect users elsewhere in the Shopify admin
  • Redirect elsewhere on the web

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.

Navigate within your app using a relative or absolute path.

Navigate to Shopify admin by using a section name and an optional resource ID.

You can create a new resource in Shopify admin by passing true to the create option.

Navigate elsewhere on the web by using a fully qualified URL.

Props

Anchor link to section titled "Props"

The useNavigate hook does not accept props. It returns a method with the following API.

Name Type Description Required
to string or AdminSectionOptions Where the app should redirect. If using a string, options must conform to AppOptions. For navigating in Shopify admin, use the AdminSectionOptions type and use the HostOptions type for passing options. Yes
options AppOptions or HostOptions Custom configuration for navigation behaviour No

AppOptions

Anchor link to section titled "AppOptions"

The AppOptions type must be used when using a string type for to.

Name Type Description Required
replace boolean Replace the current location with the new location No
target "host", "new" The context where the new location should open No

AdminSectionOptions

Anchor link to section titled "AdminSectionOptions"

You must use the AdminSectionOptions type with HostOptions.

Name Type Description Required
name "Product", "Collection", "Order", "Customer", "Discount" The name of a specific section in Shopify admin Yes
resource ResourceOptions Options for redirecting to a resource within Shopify admin No

ResourceOptions

Anchor link to section titled "ResourceOptions"
Name Type Description Required
create boolean Whether the app should redirect to a page to create a new resource of the specified type No
id string The ID of the resource that the app should navigate to No

HostOptions

Anchor link to section titled "HostOptions"

You must use the HostOptions type when using a AdminSectionOptions type for to.

Name Type Description Required
replace boolean Replace the current location with the new location No
target self The context where the new location should open No

On this page

  • Plain JavaScript
  • React