If the route of two pages both match the same URL then we have a routing conflict: vite-plugin-ssr
has to decide which of the two pages should be rendered for that URL.
Upon Route String conflicts, vite-plugin-ssr
chooses the first route from most specific to least specific. For example:
/about/team
(most specific: it matches only a single URL)/about/@path
(less specific: it also matches /about/company
, /about/vision
, ...)/about/*
(less specific: it also matches /about/some/nested/path
)/*
(least specific: it matches all URLs)More examples at
resolvePrecedence/route-strings.spec.ts
.
Upon conflicts between Filesystem Routing, Route Strings and Route Functions, vite-plugin-ssr
chooses the first route in following order:
precedence
number (e.g. 99
)precedence
number (e.g. 1
)@param
segment, e.g. /about/company
)precedence
number (or 0
)@param
segement, e.g. /product/@productId
or /product/*
)precedence
number (e.g. -1
)precedence
number (e.g. -99
)Example (4) + (6) + (7):
// product/list.page.route.js
export default '/product'
// product/item.page.route.js
export default '/product/@productId'
// product/catch-all.page.route.js
export default pageContext => {
if (!pageContext.urlPathname.startsWith('/product/')) return false
return {
precedence: -1,
pageContext: {
// E.g. redirect `/product/wrong/url` to `/product`
redirectTo: '/product'
}
}
}
URL MATCHES WINNER
================== =================================== ======
/product/42 product/item.page.route.js (6) ⬅️
product/catch-all.page.route.js (7)
URL MATCHES WINNER
================== =================================== ======
/product product/list.page.route.js (4) ⬅️
product/catch-all.page.route.js (7)
URL MATCHES WINNER
================== =================================== ======
/product/wrong/url product/catch-all.page.route.js (7) ⬅️
4: Route String, static (without @param
segment, e.g. /about/company
)
6: Route String, parameterized (with @param
segements, e.g. /product/@productId
or /product/*
)
7: Route Function, returned low negative precedence
number (e.g. -1
)
Example (1) + (4):
// admin.page.route.js
export default '/admin'
// login.page.route.js
export default pageContext => {
if( pageContext.user === null ) {
return {
precedence: 99
}
}
return false
}
URL pageContext.user MATCHES WINNER
====== ================ ======================= ======
/admin null login.page.route.js (1) ⬅️
admin.page.route.js (4)
URL pageContext.user MATCHES WINNER
====== ================ ======================= ======
/admin 'brillout' admin.page.route.js (4) ⬅️
1: Route Function, returned high positive precedence
number
4: Route String, static (without @param
segment, e.g. /about/company
)
More examples at
resolvePrecedence/overall.spec.ts
.