Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nested Routes #1459

Closed
brillout opened this issue Jan 27, 2024 · 1 comment
Closed

Nested Routes #1459

brillout opened this issue Jan 27, 2024 · 1 comment
Labels
enhancement ✨ New feature or request

Comments

@brillout
Copy link
Member

brillout commented Jan 27, 2024

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?
@brillout
Copy link
Member Author

The nested layout DX has been considerably improved. Closing in favor of #1689.

@brillout brillout closed this as not planned Won't fix, can't repro, duplicate, stale Jun 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement ✨ New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant