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 { Route } from 'vike/types'

const route: Route = (pageContext): ReturnType<Route> => {
  // ...
}

Don't omit ReturnType<RouteSync> (don't write const route: RouteSync = (pageContext) => {), otherwise TypeScript won't strictly check the return type for unknown extra properties: see this TypeScript playground and issue.

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

See also: