Is there a way to implement sub-routing?

[lake2]

The sample in the documation uses exact match, how to use part match to implement sub-routing?

[Braden Snell]

Great question! There are a couple different things to consider here:

• Creating route definitions
• Rendering the current route

Many other routing libraries don't have a strong distinction between these two concepts. Type Route's design goal of having excellent TypeScript support, however, necessitates that both these concepts are distinct and at the forefront of how to use the library. There are two parts of the Type Route api that should cover your use cases here. The documentation goes over these in depth here: https://www.type-route.org/docs/guides/nested-similar-routes.

When defining multiple very similar routes you'll probably think of something like "sub-routing" as you put it. For instance, you may have a user overview page and a user settings page with the urls /user/[userId] and /user/[userId]/settings respectively. You may think of the settings page as a sub-route of the user overview page. In Type Route however, each will have its own definition. Fortunately, there is a way to avoid redundancy when defining these routes by using the extend function (see the docs for extend to see an example).

Avoiding redundancy when defining a route, however, is only half of the story. The user overview and user settings page may have some similar aspects to their ui and you'll want to be aware of that when rendering those pages. This is what the createGroup api is for (docs and example here).

Your component hierarchy may look somethings like this App -> UserPage -> UserOverviewTab | UserSettingsTab. When deciding to render the user page you'll want to know if the current route is either the userOverview or userSettings route. The createGroup api allows you to create a reusable group of routes that is useful for doing comparisons when rendering your application. Consider these examples:

// Don't do this:
if (route.name === routes.userOverview.name || route.name === routes.userSettings.name) {
  renderUserRoute(route);
}
// Instead do this:
if (userRoute.has(route)) {
  renderUserRoute(route);
}

The signature of the renderUserRoute function may look something like this: renderUserRoute(route: Route<typeof userGroup>). Then inside of that function/component you could render aspects of the ui which pertain to both routes. When it comes time to render parts of the ui that differ between these routes you can perform the comparison as you usually would:

if (route.name === routes.userOverview.name) {
  renderUserOverviewTab(route);
} else if (route.name === routes.userSettings.name) {
  renderUserSettingsTab(route);
}

Does that make sense?

[Braden Snell]

Going to close this for now. Feel free to reopen if the above explanation isn't clear enough :)