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
// ...
}