Route handling and data fetching in JSS apps
How JSS handles route changes and data fetching from Sitecore
In Sitecore, content authors can control the URL of each page by organizing the content tree in accordance with the desired URL structure.
Routes in a JSS app are similar to website pages or Sitecore items in the site root. The sample apps use the most popular routing platform for their library to resolve routes when the app runs. Routes are hierarchically defined, forming a traditional page-tree architecture. Because there is no requirement to force your app to use this routing paradigm, you can implement more complex routing patterns if you want to.
For example, assuming the content items in the following Sitecore tree structure are pages/routes:
content site 1 Home About Products Product X Product Y Product Z site 2 Home site 3 Home
Sitecore automatically maps those pages to the following URLs:
https://site-1-hostname/ https://site-1-hostname/about https://site-1-hostname/products https://site-1-hostname/products/product-x https://site-1-hostname/products/product-y https://site-1-hostname/products/product-y https://site-2-hostname/ https://site-3-hostname/
JSS apps are expected to fully support Sitecore URL mapping.
Site hostnames and rules for how to map page names to URL segments (casing, white-space replacement, and so on) are defined in XML configs. Discuss with the Sitecore developers on your team whether to customize this, based on business requirements. Any customizations to how Sitecore handles routing requirements require collaboration between front-end and back-end developers.
Using custom routing might require implementing the same custom routing on the Sitecore back end to allow editing the custom routed site. When possible, try to use hierarchical routes.
Changing routes in a JSS app involves making a call to a Sitecore endpoint with REST or GraphQL to fetch data for the new route. Therefore, JSS sample apps define custom routing implementations that also handle data fetching and/or state management, as follows:
Next.js apps use a file-system-based router and optional catch-all routes.
The React sample app implements a
RouteHandlercomponent in the
/src/RouteHandler.jsfile. For more information, see Routing and state management in the JSS React app.
The Angular sample app uses the
changeRoutefunction. Based on the chosen rendering method, the app uses the server-side implementation from the
/src/app/jss-context.server-side.service.tsfile, or the client-side implementation from
src/app/jss-context.service.ts. For more information, see Routing and state management in the JSS Angular sample app.
Vue.js implements a
/src/RouteHandler.vue. For more information, see Routing and state management in the JSS Vue.js sample app.
React Native implements a routing handler in the
/src/dataService/dataService.connected.jsfile. For more information, see Routing and state management in React Native JSS apps.
You can customize data fetching functions for your application by using custom data fetchers or using one of the strategies for extending the Sitecore Layout Service.