I am trying to port a nuxt 2 web app to Sveltekit (version 5 I guess) and have run into this hiccup with respect to urls and routing.
Route Structure in Nuxt 2
routes.js
I am trying to achieve the following route for a master detail view
Route | What is shown on desktop | What is shown on mobile |
---|---|---|
example.com | list + detail | list |
example.com/news/<item-id>/<title> | list + detail | detail |
example.com/news?filter=<some-filter>&search=<search-term> | list + detail | list |
example.com/news/<some-tag> | list + detail | list |
example.com/news/<some-tag>?filter=<some-filter>&search=<search-term> | list + detail | list |
example.com/news/<some-tag>/<item-id>/<title> | list + detail | detail |
The code for the above routing structure in nuxt 2 using @nuxtjs/router looks like this
{ path: '/news/:tag?', alias: '/', component: Index, children: [ { path: '', name: 'NewsList', component: NewsListWrapper, props: true, }, { path: '/news/:tag?/:id([a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12})/:title', name: 'NewsDetail', component: NewsDetailWrapper, props: true, }, ], },
The above index component in Nuxt 2 handles everything
I am trying to translate this routing structure to SvelteKit and I am running into trouble. I'm a beginner in SvelteKit.
Route Structure in SvelteKit
src/routes/├──+page.svelte # Handles example.com├── news/│├──+page.svelte # Handles example.com/news and query parameters│├── [tag]/││├──+page.svelte # Handles example.com/news/<some-tag> and query parameters││├── [item-id]/│││└── [title]/│││└──+page.svelte # Handles example.com/news/<some-tag>/<item-id>/<title>│└── [item-id]/│└── [title]/│└──+page.svelte # Handles example.com/news/<item-id>/<title>
There are 4 +page.svelte
components. How to achieve the same layout as Nuxt 2 using a single +page.svelte
?