A different approach to routing is needed for Headless Wagtail projects. Unlike the traditional routing for Wagtail, the URL patterns on a headless site are usually configured in the frontend framework (such as Next.js or Gatsby). Wagtail, by default, resolves URLs to pages using their slugs and location in the page tree.
Because of this default, the "View Live" links in the administration view of Wagtail may resolve to the wrong URL if the URL patterns configured in the frontend framework don't match the page structure. If rich text is rendered server-side, this will also affect any internal links in rich text fields.
The current recommended approach to routing on a Headless Wagtail project is to stick with using the Wagtail routes rather than creating custom routes. Creating custom routes will require more frequent updates and maintenance.
Routes need to be built each time a new site is created and we'd like better documentation to explain this process. One long-term solution for supporting routing in Headless Wagtail may be to manage it through a JS library or a plugin.