Nested Routes

[brillout]

Support Route Strings like /product/@id/@!view{reviews,pricing} to tell Vike that the route paramter view is "nested":

• Changing the route parameter view shouldn't scroll the page to the top.
• Using {reviews,pricing} tells Vike that the route parameter view only accepts the values reviews and pricing.
• Vike sets pageContext.url.pathnameRoot = '/product', and upon nested navigation pageContext.nestedNavigation = ['view']. (So that data fetching tools such as vike-react-query can tell whether the re-render was triggered by a nested navigation and thus cache more aggressively. Concretely, vike-react-query could use pageContext.url.pathnameRoot as cache condition.)

// /pages/product/+route.js

export default '/product/@id/@!view{reviews,pricing}'

Similarly for Route Functions:

// /pages/product/+route.js

export default () => {
  return {
    routeParams: {
      view: 'pricing',
    },
    // Same logic as above
    keepScrollPosition: ['view'],
    // Or using pageContext.urlPrevious to directly control whether to scroll the page to the top
    keepScrollPosition: true,
  }
}

Open questions:

• I'm not sure about the syntax /product/@id/@!view{reviews,pricing}, it feels like there could be a cleaner syntax?
• Can we infer the structure of such string in TypeScript land? For typesafe links without code-gen.
• How about making Vike always treat paramters other than the first one as nested? For changing this default behavior, the user can use a Route Function => no need for a new syntax anymore (other than {reviews,pricing}).
  • Actually, it isn't clear whether subsequent route parameters should trigger a scroll-to-the-top?
• Is {reviews,pricing} really worth it? Isn't using a guard() good enough? With the previous point, we wouldn't need any new syntax.
• How can vike-react-query know what data belongs to what nested parameter? How about a new component hook that does nested routing + data fetching?