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.
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.