Catch-All Routes

We can use Route Strings and Route Functions to implement catch-all routes.

// product.page.route.js

// Match URLs that start with `/product/*`:
// `/product/42`
// `/product/1337/details`
// `/product/2048/some/deeply/nested/path`
//  ...
export default '/product/*'

The value of the catch-all is available at pageContext.routeParams['*'].

To route all URLs to a single page:

// catch-all.page.route.js

export default '/*'

// catch-all.page.js

// `Page` is the only page of our app.
export { Page }

// ...

Route Functions enable all kinds of catch-all behavior.

// user.page.route.js

export default async pageContext => {
  // Parse the URL
  const urlParts = pageContext.url.slice(1).split('/')

  // Only URLs that start with `/product/*`
  if (urlParts[0] !== 'product') {
    return false
  }

  // Any logic we want really
  // ...
}

✍ Edit this page