> ## 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 = () =>
search query
;
export const FlavorSwitcher = ({current, baseHref = "", options = [], label = "InstantSearch framework"}) => {
if (options.length === 0) {
return
FlavorSwitcher requires at least one option.
;
}
const selected = options.find(option => option.value === current) ?? options[0];
return ;
};
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/).
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 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`
+
+ `;
+ },
},
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;
},
})
]);
```