Routing mechanisms

[fecony]

React routing usually has some mechanism to group routes under path or to use layout for routes
Grouping with Layout component example from docs:

<Route path="teams" element={<Teams />}>
  <Route path=":teamId" element={<Team />} />
  <Route path=":teamId/edit" element={<EditTeam />} />
</Route>

Now it's impossible to use Layout or group routes under the same path. What I think wasp could do to allow us to do this is to introduce route grouping syntax in wasp file:

group Settings {
  path: '/settings, // Specify path
  layout: import SettingsLayout from "@client/layouts/Settings" // Specify layout for pages under this group
  routes: [IntegrationsRoute, PreferencesRoute],
}

route IntegrationsRoute { path: "/integrations", to: SettingsIntegrationsPage }
page IntegrationsPage {
  authRequired: true,
  component: import IntegrationsPage from "@client/settings/IntegrationsPage"
}

route PreferencesRoute { path: "/preferences", to: PreferencesPage }
page PreferencesPage {
  authRequired: true,
  component: import PreferencesPage from "@client/settings/PreferencesPage"
}

That would place these 2 routes under /settings, so we would get /settings/integrations, /settings/preferences

[Martinsos]

This makes a lot of sense, and while you could do it manually right now by having a Wasp Page under "/settings" route and then from React component of that Page doing further routing to other react compnents, you can't do it in Wasp at the moment.

An issue related to this: #985 .