Render widget UI components based on page URI

import WidgetsProvider from "@sitecore-discover/react";
import createTheme from "@sitecore-discover/ui";
import CUSTOM_THEME from "./widget_components/customTheme";

import PreviewSearchWidget from "./widget_components/previewSearchWidget";
import RecommendationWidget from "./widget_components/recommendationWidget";

import SearchtCategoriesWidget from "./widget_components/searchCategoriesWidget"; 
import SearchProductsWidget from "./widget_components/searchProductsWidget"; 
import TrendingRecommendationWidget from "./widget_components/trendingRecommendationWidget"; 
import MayLikeRecommendationWidget from "./widget_components/mayRecommendationWidget";

const theme = createTheme(CUSTOM_THEME);

setWidget('cat_search', { type: WidgetDataType.SEARCH_RESULTS, component: SearchtCategoriesWidget} );
setWidget('prod_search', { type: WidgetDataType.SEARCH_RESULTS, component: SearchProductsWidget} );
setWidget('trend_rec', { type: WidgetDataType.RECOMMENDATION, component: TrendingRecommendationWidget} );
setWidget('may_like_rec', { type: WidgetDataType.RECOMMENDATION, component: MayLikeRecommendationWidget } );

const MyApp = () => {
  return (
    <div style={theme.style}>
      <WidgetsProvider
        env="<environment>"
        customerKey="<customer key>"
        apiKey="<api key>"
        useToken
      >
        <header>
            <h1>My App</h1>
            <PreviewSearchWidget rfkId="header_ps" />
        </header>

        <div class="content">
          <PageWidgets />
        </div>

        <footer>
            <RecommendationWidget rfkId="footer_re" />
        </footer>
      </WidgetsProvider>
    </div>
  );
};