Organizing your app

As the app developer, you can organize your app into routes and associate each route with an extension pointextension point. This lets you control which part of your app appears in which area of the SitecoreAI user interface.

A route is a URL path in your app, such as /home or /fullscreen-analytics, and it corresponds to one part of your app, such as a component or an entire page. By associating a route with an extension point, you ensure that the extension point displays that specific part of your app to the Sitecore product user.

For example, you could associate your app's /fullscreen-analytics route with the SitecoreAI full screen extension point. This way, when the Sitecore product user opens your app in the SitecoreAI full screen extension point, they see the contents of your app's /fullscreen-analytics route.

Note the following about routes and extension points:

function App() {
  return (
    <Routes>
      <Route path="/home" element={<HomePage />} />
      <Route path="/fullscreen-analytics" element={<AnalyticsPage />} />
      <Route path="/dashboard-analytics" element={<AnalyticsWidget />} />
      <Route path="/dashboard-reports" element={<ReportsWidget />} />
    </Routes>
  );
}