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](#plain-javascript) 2. [React hook](#react) ## Plain JavaScript ### 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](/docs/api/app-bridge/previous-versions/app-bridge-from-npm/app-setup#initialize-shopify-app-bridge-in-your-app). ```js import createApp from '@shopify/app-bridge'; import {Redirect} from '@shopify/app-bridge/actions'; const app = createApp(config); const redirect = Redirect.create(app); ``` ### 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: ```js // Go to {appOrigin}/settings redirect.dispatch(Redirect.Action.APP, '/settings'); ``` ### Redirect to an absolute URL outside of the app and outside of Shopify admin. ```js // Go to http://example.com redirect.dispatch(Redirect.Action.REMOTE, 'http://example.com'); ``` ### Open in a new window Add the `newContext` option (equivalent to `<a target="_blank">`): ```js // Go to http://example.com in a new window redirect.dispatch(Redirect.Action.REMOTE, { url: 'http://example.com', newContext: true, }); ``` ### Redirect to a relative path in Shopify admin Redirect to the customers section in Shopify admin. The path must be prefixed with a slash. ```js // Go to {shopUrl}/admin/customers redirect.dispatch(Redirect.Action.ADMIN_PATH, '/customers'); // Go to {shopUrl}/admin/customers in a new window redirect.dispatch(Redirect.Action.ADMIN_PATH, { path: '/customers', newContext: true, }); ``` ### Redirect to a named section in Shopify admin Redirect to the **Products** section in the Shopify admin: ```js // Go to {shopUrl}/admin/products redirect.dispatch(Redirect.Action.ADMIN_SECTION, { name: Redirect.ResourceType.Product, }); // Go to {shopUrl}/admin/products in a new window redirect.dispatch(Redirect.Action.ADMIN_SECTION, { section: { name: Redirect.ResourceType.Product, }, newContext: true, }); ``` ### Redirect to a specific resource in Shopify admin. Redirect to the collection with the ID `123` in the Shopify admin: ```js // Go to {shopUrl}/admin/collections/123 redirect.dispatch(Redirect.Action.ADMIN_SECTION, { name: Redirect.ResourceType.Collection, resource: { id: '123', }, }); ``` ### Redirect to create a product in Shopify admin. Redirect to `{shopUrl}/admin/products/new` in the Shopify admin: ```js // Go to {shopUrl}/admin/products/new redirect.dispatch(Redirect.Action.ADMIN_SECTION, { name: Redirect.ResourceType.Product, resource: { create: true, }, }); ``` ### Redirect to a product variant in Shopify admin. Redirect to the collection with the id '123' in Shopify admin: ```js // Go to {shopUrl}/admin/products/123/variant/456 redirect.dispatch(Redirect.Action.ADMIN_SECTION, { name: Redirect.ResourceType.Product, resource: { id: '123', variant: { id: '456', }, }, }); ``` ### Redirect to create a new product variant in Shopify admin. Redirect to `{shopUrl}/admin/products/123/variants/new` in the Shopify admin: ```js // Go to {shopUrl}/admin/products/123/variants/new redirect.dispatch(Redirect.Action.ADMIN_SECTION, { name: Redirect.ResourceType.Product, resource: { id: '123', variant: { create: true, }, }, }); ``` ### Subscribe to actions You can subscribe to actions dispatched through the redirect action set: ```js redirect.subscribe(Redirect.Action.APP, (payload: Redirect.AppPayload) => { // Do something with the redirect console.log(`Navigated to ${payload.path}`); }); ``` ### Subscribe to all redirect actions You can subscribe to all redirect actions within your app, regardless of which action sets trigger the actions: ```js app.subscribe(Redirect.Action.APP, (payload: Redirect.AppPayload) => { // Do something with the redirect console.log(`Navigated to ${payload.path}`); }); ``` ### Current restrictions **Query Params** The use of query params is not supported. All query params are removed from the path during the redirect. ## 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 > 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`](/docs/api/app-bridge/previous-versions/app-bridge-from-npm/using-react#provider). Navigate within your app using a relative or absolute path. ```jsx import {useNavigate} from '@shopify/app-bridge-react'; function MyComponent { const navigate = useNavigate(); return ( <> <Link onClick={() => { navigate('https://my-app.com/about'); }}>About</Link> <Link onClick={() => { navigate('/about'); }}>About</Link> </> ); } ``` Navigate to Shopify admin by using a section name and an optional resource ID. ```jsx import {useNavigate} from '@shopify/app-bridge-react'; function MyComponent { const navigate = useNavigate(); return ( <Link onClick={() => { navigate({ name: 'Collection', resource: { id: '123', } }); }}>Deluxe collection</Link> ); } ``` You can create a new resource in Shopify admin by passing `true` to the `create` option. ```jsx import {useNavigate} from '@shopify/app-bridge-react'; function MyComponent { const navigate = useNavigate(); return ( <Link onClick={() => { navigate({ name: 'Collection', resource: { create: true, } }); }}>Create a new collection</Link> ); } ``` Navigate elsewhere on the web by using a fully qualified URL. ```jsx import {useNavigate} from '@shopify/app-bridge-react'; function MyComponent { const navigate = useNavigate(); return ( <Link onClick={() => { navigate('https://shopify.com'); }}>Shopify</Link> ); } ``` ### Props The `useNavigate` hook does not accept props. It returns a method with the following API. |Name|Type|Description|Required| |---|---|---|---| |to|`string` or [`AdminSectionOptions`](#adminsectionoptions)|Where the app should redirect. If using a `string`, options must conform to [`AppOptions`](#appoptions). For navigating in Shopify admin, use the [`AdminSectionOptions`](#adminsectionoptions) type and use the [`HostOptions`](#hostoptions) type for passing options.|Yes| |options|[`AppOptions`](#appoptions) or [`HostOptions`](#hostoptions)|Custom configuration for navigation behaviour|No| #### 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 You must use the `AdminSectionOptions` type with [`HostOptions`](#hostoptions). |Name|Type|Description|Required| |---|---|---|---| |name|`"Product"`, `"Collection"`, `"Order"`, `"Customer"`, `"Discount"`|The name of a specific section in Shopify admin|Yes| |resource|[`ResourceOptions`](#resourceoptions)| Options for redirecting to a resource within Shopify admin|No| ### 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 You must use the `HostOptions` type when using a [`AdminSectionOptions`](#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|