---
title: "PageComponent"
slug: "pagecomponent"
abstract: "Using the PageComponent to load to render widgets in Sitecore Search JS SDK for React."
---
# 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.](https://doc.sitecore.com/api/markdown-image/search/en/developers/search-js-sdk-for-react/images/page-config-cec.png)

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.

<details>
<summary><h2>Import path</h2></summary>

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

</details>

<details>
<summary><h2>Example</h2></summary>

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.

```js
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.

</details>