Wildcard Items in Sitecore XM Cloud - Wildcard Gotcha’s

Using wildcard pages in Sitecore XM Cloud with multisite setups? Learn how to update your application to fix routing issues, allowing custom wildcard pages to work properly

July 30, 2024

By Craig Hicks

Using Wildcard Items in XM Cloud with Multisite

Using wildcard items in Sitecore is a handy process for managing and integrating common content into multiple areas or across multiple sites. Another article published by my colleague has a great explanation on how to achieve this. You can find that article here.

The Problem With Sitecore's Default Routing

Now that XM Cloud comes with multisite capabilities out of the box, the typical pages routing doesn’t work as expected. Sitecore hijacks the route and does its own magic. This means the app never reaches the custom wildcard [...path].tsx

Using Multisite in Middleware to Solve the Problem

Fortunately, we have the ability to add our URLs to the middleware to be excluded from the default hijacking, allowing the custom page to be hit.

First, let’s find and open the multisite.ts file in the lib/middleware/plugins directory of our JSS frontend.

Screenshot of a directory structure highlighting the file multisite.ts in the middleware/plugins folder.

Now, we want to update the excludeRoute property to be true if the URL is trying to hit our wildcard page(s). We can do this by passing the pathname to the arrow function and checking if it starts with our path. If it does, we want it excluded and return true. Otherwise, return false and continue on.

excludeRoute: (pathname: string) => {
  if (pathname.startsWith('/insights/') || pathname.startsWith('/consultants/')) {
    return true;
  }
  return false;
},

Fixing Wildcards With Multisite Routing

By customizing the excludeRoute property in the multisite.ts file, we can effectively bypass the default Sitecore route hijacking, allowing our custom wildcard pages to be hit as intended. This solution ensures that the multisite capabilities of XM Cloud work seamlessly with your custom routing needs.



A photo of Craig Hicks, an employee at Fishtank

Craig Hicks

Front End Developer

Craig Hicks (or ‘chicks’ for short) is a seasoned developer whose expertise spans web development, digital media, project management, and leadership. Throughout his career he has evolved from hands-on coding roles to strategic management positions, and aims to apply his experience into his passion for problem-solving and development. His love for continuous learning and diving into new challenges applies to both his professional life and personal pursuits. Outside of work, he enjoys music, movies, and sports with friends and family.