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|