Route handling and data fetching in JSS apps

Current version: 21.5

In Sitecore, content authors can control the URL of each page by organizing the content tree by 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:

RequestResponse

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:

RequestResponse

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.

Note

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 of 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. Next.js apps use a file-system-based router and optional catch-all routes.

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.

Do you have some feedback for us?

If you have suggestions for improving this article,