⚠️
The vite-plugin-ssr project has been renamed Vike.
  • If you are already using vite-plugin-ssr then migrate to Vike.
  • For new projects, don't use vite-plugin-ssr but use Vike instead.

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['*'].

The difference between /product/* and /product/@productId is that the former includes nested paths whereas the latter doesn't. For example /product/42/details matches /product/* but doesn't match /product/@productId.

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.urlPathname.slice(1).split('/')

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

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