Best way to render routes as modal

[v-morlock]

Hey,

I‘m quite new to svelte kit and have been wondering about the best way to render routes within a modal in front of the parent route.

I‘m coming from react router / remix where each route can be a „layout“ as long as it contains an outlet (slot). This enables a modal to be rendered on top of its parent route quite easily.

I wondered if there is a good way to achieve the same in svelte kit. What I considered so far:

1. using a query parameter like ?modal and rendering the modal directly in the parent component.
   Drawbacks: I can’t think of an easy way to lazy-load data that’s just required within the modal (think e.g. of a details modal opened after clicking a row in a list), and I imagine it could become a bit messy as it‘s not really a separate route with its own actions etc

2. rendering the parent route fully in a layout.
   Drawbacks: I think routes can’t have their own actions so they would always need a +layout.server.ts for fetching data and a +page.server.ts for providing actions if both is required. That feels like a bit of a workaround to me

Are there any other approaches I haven‘t thought of yet? How do you handle this in your projects?

[mpost]

It can be done with the shallow routing introduced in SvelteKit 2.0.

[v-morlock]

Thanks for getting back regarding my modal question! While that looks like a feasible solution, i think one downside is that the modal doesn't have it's own url then, so you won't be able to link to it for example

[noobmaster19]

Hey! Have you had a solution to it?

[v-morlock]

The only solution I’ve found was to have the whole page in the layout and to have an empty +page.svelte …