Improve frontend routing

[sodic]

Ideas:

• Type safe routes (https://tanstack.com/router/v1/docs/guide/type-safety)
• a Link component (maybe we already have this?)
• nested routes
• layouts

[infomiho]

Could you expand a bit how could it look like in Wasp? Just some possible usage examples and the DX benefits.

[Martinsos]

React Router already brings https://reactrouter.com/en/main/components/link -> is this what you meant @sodic ? Maybe you can elaborate a bit on what you meant when you mentioned Link?

[Martinsos]

Grouping routes could also be interesting. @Fecony mentions it here: #1362 .

[Martinsos]

Adding layouts is also related to improving frontend routes: https://github.com/wasp-lang/wasp/issues/985 .

[Martinsos]

Tanstack might be interesting option, to use instead of react router!

https://discord.com/channels/686873244791210014/867713251479519232/1106931121138176091 -> there is a bit of discussion about it here.

[Martinsos]

Expo Router might also be a good option, @Zeko369 says they are stable now and good. Similar to NextRouter but maybe a bit better. Remix is also worth checking out, as the starting point of these modern new routing approaches.

In our DSL, we could have a sub-DSL for organizing routes into hierarchies, also including layouts into it. Very similar to what @Fecony described above.

Quick idea (Imagine DSL, not what Wasp currently supports):

route "/" {
  route "dashboard" {
    layout: import { DashboardLayout } from "layouts/DashboardLayout.jsx"
    page: DashboardPage
    route "tasks/:id" {
      page: TasksListPage
    }
  }
}

page DashboardPage { ... }
page TasksListPage { ... }

Or we could imagine something even more condensed:

route DashboardRoute {
  / -> DashboardPage, DashboardLayout
    task/:id -> TaskPage
    tasks/ -> TasksPage
      done/ -> DoneTasksPage
    orgs/ -> OrgsPage, OrgsLayout
      myorg/ -> MyOrgPage
      _ -> OrgsVerificationLayout // _ means it is just a virtual grouping to apply the layout. It is not really part of the path.
        verified/ -> VerifiedOrgsPage
        unverified/ -> UnverifiedOrgsPage

}

route / {
  / -> LandingPage
    dashboard/ -> DashboardRoute
}

It is worth playing here with different designs and DX, that is the main challenge really.

[Martinsos]

@Zeko369 said Expo is quite interesting regarding grouped / nested routes, that they are doing quite good job with that.