Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

Reusing nested subroutes in Sveltekit

$
0
0

On sveltekit is there a way to reuse a set of nested subroutes on several higher-level routes without repeating code?

Use case

I have a website about sports, I have the following routes:

/dailies  --> 2 column layout/live/feed --> 2 rows layout/strategy/[stratId] --> 2 columns layout/filters --> 1 row + 1 row with 2 columns layout

In all those cases, the left column (or top row) will show a predefined list of matches in different configurations and appearances.

By clicking the match, the right column (or bottom row) will show the match data. The match data displayed is the same no matter where you are accessing it. The navigation for the matches looks like this:

/match/{matchId}/match/{matchId}/tab1/match/{matchId}/tab1/subtab1-1/match/{matchId}/tab1/subtab1-2/match/{matchId}/tab2/subtab2-1/match/{matchId}/tab2/subtab2-1/match/{matchId}/tab3

What I want is to have all of the following routes:

/dailies/dailies/unique-daily-stuff-cant-be-used-with-matches/dailies/match/{matchId}/dailies/match/{matchId}/tab1/dailies/match/{matchId}/tab1/subtab1-1/dailies/match/{matchId}/tab1/subtab1-2/dailies/match/{matchId}/tab2/subtab2-1/dailies/match/{matchId}/tab2/subtab2-1/dailies/match/{matchId}/tab3/live/feed/live/feed/unique-feed-stuff-cant-be-used-with-matches/live/feed/match/{matchId}/live/feed/match/{matchId}/tab1/live/feed/match/{matchId}/tab1/subtab1-1/live/feed/match/{matchId}/tab1/subtab1-2/live/feed/{matchId}/tab2/subtab2-1/live/feed/{matchId}/tab2/subtab2-1/live/feed/{matchId}/tab3(...)/filters/match/{matchId}/tab3

As you can see, the matches subroutes are repeated across all higher-level routes, and the page I want to render is the same; just their position will change.

Things I have tried

Option 1 - Replicating routes, adding page data to the component

My first attempt was to create the folder structure for all those routes and create components containing the data for each of the match pages. This allows me to have a single source of truth to the pages, but it makes the routes themselves have multiple sources of truth.

For example, if I were to add a tab4, I would need to create a new folder in 4 different places; forgetting to do so for one of them would cause errors.

Option 2 - Using route parameters and <svelte:components>

On this attempt I would use the following route:

/[category]/match/(...)

And then proceed to alternate the +layout data using svelte:component to change between the data on the top level. Similar to the https://learn.svelte.dev/tutorial/svelte-component.

This was simply bad; since the top level +page and +layout are different, I had to have switches on both of them to account for the parameters, which was annoying to maintain. But the worst part is that I lost the ability to have subroutes that only applied to dailies, for example. And it made the code much less intuitive to navigate.

What I want ?

I wanted a better way (if there is any) to reuse routes as nested subroutes.Angular (that does not use file-based routing) had a pretty good solution where you could just create a new module with the subroutes and import it as the child of any other existing route. It would look something like:

[  {    path: "dailies",    component: DailiesComponent,    children: [      { path: "unique-daily-stuff", component: UnrelatedComponent },      {        path: "match",        loadChildren: () => import("./match.module").then((m) => m.MatchModule),      },    ],  },  {    path: "live",    component: LiveComponent,    children: [      {        path: "feed",        children: [          {            path: "match",            loadChildren: () =>              import("./match.module").then((m) => m.MatchModule),          },          {            path: "unique-daily-stuff",            component: UnrelatedComponent,          },        ],      },    ],  },];

As you can see there is just a reference to the subroute file and everything is shared. I know that file-based routing works differently, but is there a similar alternative ?


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>