> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Redirects

> Learn how to add redirects on specific searches with React InstantSearch.

export const SearchQuery = () => <Tooltip tip="The text users enter into a search box. In the Search API, this corresponds to the query parameter. A search query is often used with filters, facets, and other parameters, but these aren't part of the query text itself.">
    search query
  </Tooltip>;

<Note>
  This is the **React InstantSearch v7** documentation.
  If you're upgrading from v6, see the [upgrade guide](/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-v6-to-react-instantsearch-v7).
  If you were using React InstantSearch Hooks,
  this v7 documentation applies—just check for [necessary changes](/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-hooks-to-react-instantsearch-v7).
  To continue using v6, you can find the [archived documentation](https://algolia.com/old-docs/deprecated/instantsearch/react/v6/api-reference/instantsearch/).
</Note>

Redirects can enhance the search experience. For example:

* Searching for "help" redirects users to a support page
* Searching for a category, such as, "TV" redirects users to a category page
* Searching for a specific product or brand redirects users to a seasonal promotional page for it
* Searching for specific keywords related to an ongoing event, such as, "masks", redirects users to a more specific landing page

This guide explains how to add redirects to InstantSearch through [Rules](/doc/guides/managing-results/rules/detecting-intent) and using custom data.

Redirects are handled by Autocomplete's [redirect plugin](/doc/ui-libraries/autocomplete/api-reference/autocomplete-plugin-redirect-url).
However, if you don't use [Autocomplete](/doc/ui-libraries/autocomplete/introduction/what-is-autocomplete), you must handle redirects in InstantSearch:

* If a redirect was created in the Manual Editor, [handle it with InstantSearch's `queryRuleCustomData` widget](#handle-a-manual-editor-rule-redirect).
* If a redirect was created in the Visual Editor, you must [create a custom InstantSearch widget to handle redirects](#handle-a-visual-editor-rule-redirect).

## Handle a Visual Editor rule redirect

### Configure the redirect with a custom widget

If a redirect was created in the Visual Editor, the API response contains the `renderingContent.redirect` property which, in turn, contains the redirect `URL`.
To access this property from InstantSearch, you must create a custom widget.

A [custom widget](/doc/guides/building-search-ui/widgets/customize-an-existing-widget/react#customize-the-complete-ui-of-the-widgets) can get up-to-date results from the [`useInstantSearch()`](/doc/api-reference/widgets/use-instantsearch/react) Hook.

Use it as follows:

```jsx React icon=code theme={"system"}
import { useInstantSearch } from "react-instantsearch";

function Redirect() {
  const { results } = useInstantSearch();
  const url = results?.renderingContent?.redirect?.url;
  if (url) {
    window.location.href = url;
  }
  return null;
}
```

## Handle a Manual Editor rule redirect

If a redirect was created in the Manual Editor, handle it with InstantSearch's [`QueryRulesCustomData`](/doc/api-reference/widgets/query-rule-custom-data/react) widget.

### Configure a rule

To set up a rule that returns custom data whenever the <SearchQuery /> matches specific keywords,
see [Create a rule for returning custom data](/doc/guides/managing-results/rules/merchandising-and-promoting/how-to/redirects#create-a-rule-for-returning-custom-data).

### Configure the `queryRuleCustomData` widget

After setting up a rule that returns the custom redirect data, you can use the [`QueryRulesCustomData`](/doc/api-reference/widgets/query-rule-custom-data/react) widget to update the page location when `userData` contains a redirect.

```jsx React icon=code theme={"system"}
import { useQueryRules } from "react-instantsearch";

function Redirect() {
  const { items } = useQueryRules();
  const match = items.find((data) => Boolean(data.redirect));
  if (match && match.redirect) {
    window.location.href = match.redirect;
  }
  return null;
}
```

### Offer a suggested redirect rather than a hard redirect

The preceding is an example of a "hard redirect", which forces users to a specific URL. This works in most situations, but sometimes you might want to suggest a redirect URL rather than force it onto them.

To do this, create the rule similarly but distinguish between "hard" and "suggested" redirects by ensuring the returned data is a JSON object. The object's properties are:

* **name** (used to display the link)
* **URL**
* **force** (`true` for a hard redirect, `false` for a suggested redirect).

```json JSON icon=braces theme={"system"}
  {
    "redirect": {
      "name": "help",
      "url": "https://www.algolia.com/support",
      "force": true
    }
  }
```

With this change applied, the [`QueryRulesCustomData`](/doc/api-reference/widgets/query-rule-custom-data/react) widget that had been previously defined needs updating to decide what happens to a user based upon the returned data.

To do this, the redirect check (within `transformItems`) needs updating to decide whether to force the redirect onto users or not.
The default template also needs setting to display a user message with the specific redirect URL.

```diff JavaScript icon=code theme={"system"}
  search.addWidgets([
  instantsearch.widgets.queryRuleCustomData({
    container: '#queryRuleCustomData', 
    templates: {
-      default: '',
+      default({ items }, { html }) {
+        const customData = items.find(data => Boolean(data.redirect));
+
+        if (!customData) {
+          return null;
+        }
+
+        return html`
+          <div>
+            <a href="${customData.redirect.url}">
+              Click to view more on: '${customData.redirect.name}'
+            </a>
+          </div>
+       `;
+     },  
    },
    transformItems(items) {
      const match = items.find(data => Boolean(data.redirect));
-      if (match && match.redirect) {
+      if (match && match.redirect && match.redirect.force) {
        window.location.href = match.redirect;
+       return [];
      }

-      return [];
+      return items;
    },
  })
]);
```