`route`

The route config determines the page's routing.

// /pages/product/+config.js
 
export default {
  route: '/product/@id'
}

// /pages/product/+Page.jsx
 
export default Page
 
/* This page can have URLs such as:
   /product/12345
   /product/macbook-pro
   /product/iPhone42
   ...
*/
function Page() {
  return <>
    <h1>Product Information</h1>
    {/* ... */}
  </>
}

Instead of a Route String, you can also define a Route Function:

// /pages/product/+route.js
 
export { route }
 
function route(pageContext) {
  const parts = pageContext.urlPathname.split('/')
  if (parts[1] !== 'product') {
    return false
  } else {
    return {
      routeParams: {
        id: parts[2]
      }
    }
  }
}

TypeScript

export { route }
 
import type { RouteSync } from 'vike/types'
 
const route: RouteSync = (pageContext): ReturnType<RouteSync> => {
  // ...
}

Don't omit ReturnType<RouteSync> otherwise TypeScript won't strictly check the return type.

See API > pageContext > Typescript for more information on how to extend pageContext with your own extra properties.