Nested optional path params? (Google Calendar-style routing problem)

[curtisupshall]

I'm migrating my app from Next.js to Vite + Tanstack Router and I'm struggling to conceptualize this requirement for my calendar feature.

The app needs to support nested routes of the form:

/calendar/$view/$y/$m/$d

where $view is either yearly ("y"), monthly ("m") or weekly ("w"). Some examples of valid URLs the app should handle:

• /calendar/y/2025
  • Result: $view = 'y' and $y = 2025; The calendar fetches events within [2025-01-01, 2025-12-31]
• /calendar/m/2024/12
  • Result:$view = 'm', $y = 2024, and $m = 12; The calendar fetches events within [2024-12-01, 2024-12-31]
• /calendar/w/2025/3/20
  • Result: $view = 'w', $y = 2025,$m = 3, and $d = 20; The calendar fetches events within [2025-03-16, 2024-03-22] because that is the week that encapsulates 2025-03-20.
• /calendar/m/2020/5/5
  • $view = 'm', $y = 2020, $m = 5, and $d is ignored; The calendar fetches events within [2020-05-01, 2020-05-31]
• /calendar/m/2020
  • $view = 'm', $y = 2020, $m = undefined; The calendar fetches events within [2020-01-01, 2020-01-31], since January is the default month

Note: I've already coded up the logic that transforms { view: string, y?: string, m?: string, d?: string } into the aforementioned date ranges

I've tried using _splat which might work fine, but I'm wondering if this can be handled in a more idiomatic way. For example, if I have a <Link to='/calendar/$view/$y/$m/$d' params={{ view: 'm' }} />, is it possible to make the compiler enforce $y and $m to be required buy $d to be type never, since month view only needs year and month?

Just to add a bit more clarity, here are the typedefs I'm trying to enforce:

enum View {
  YEARLY = 'y',
  MONTHLY = 'm',
  WEEKLY = 'w',
}

interface CalendarParams {
  view: View
  y?: string;
  m?: string;
  d?: string;
}

type WeeklyParams = CalendarParams &  {
  view: View.WEEKLY;
}

type MonthlyParams = Pick<CalendarParams, 'view' | 'y' | 'm'> & {
  view: View.MONTHLY
}

type YearlyParams = Pick<CalendarParams, 'view' | 'y'> & {
  view: View.YEARLY
}

[curtisupshall]

I think I've managed to implement a reasonable solution here 🙌 Will post my code before closing this discussion.

[curtisupshall]

https://github.com/curtisupshall/zisk/blob/32eec1109871a92513a514f18f90e9e907264817/app/src/web/routes/_mainLayout/journal.%24view.%24.tsx