PageComponent

In Sitecore Search, a page is a container for widgets and is strictly associated with a URL or URL pattern. For example, typically a preview search widget is configured to be displayed on multiple webpages and a search results widget is displayed without the preview search widget.

In the Sitecore Search user interface, a page is configured with a URL or URL pattern.

To render widgets for a specific URL, you can use the PageComponent. The component fetches data to populate only the widgets that are configured to render for a page and renders respective widget components.

Import path

import { PageComponent } from '@sitecore-search/react';

Example

The following code block is for a component that renders a search results widget when a visitor browses to /search relative to the declared domain.

import { PageComponent, WidgetDataType, setWidget } from '@sitecore-search/react';
import MyComponent from './path/to/MyComponent';

const SearchResultsPage = () => {
  setWidget('rfkid_7', 'content', {
    component: MyComponent,
    type: WidgetDataType.SEARCH_RESULTS,
  });
  return <PageComponent uri={'/search'} />;
};

export default SearchResultsPage;

Note

You can also use the usePageWidgets query hook to render widgets based on page URL.

If you have suggestions for improving this article, let us know!