Render routed component in another component

[gerardkd]

I'm coming from an Angular background and trying to see if SvelteKit is a good fit for future projects. Right now, I'm struggling with the nested layouts, where a routed component should be rendered inside another component.

I've added a Stackblitz of this behaviour in Angular: https://stackblitz.com/edit/angular-ivy-tu3bj7. The <router-outlet> component in TodoDetailComponenent ensures that the TodoEditComponent will render in that slot inside the TodoDetailComponent.

Routes

• /todos/[id] -> Will render a TodoDetail component
• /todos/[id]/edit -> Should render a TodoEdit component in the same 'view' as the TodoDetail component (so both the TodoDetail and the TodoEdit component should be visible).

I would like to use this behaviour in SvelteKit, but I'm having a hard time getting it to work. I'd thought I could use a __layout.svelte that renders the todo and use a <slot> for the /edit and EditComponent, but I can't use (page) endpoints for __layout.svelte components (#4274) and I would like to use a endpoint for getting the todo information.

What would be the correct 'SvelteKit' way of doing this? Create a standalone endpoint and calling that endpoint (with parameter) in the load function of the __layout.svelte component for rendering the todo details and add a slot for rendering the EditComponent when /edit is added to the route? Or am I missing something and should it be possible to use a <slot> inside a component where a route component will be rendered?

[gerardkd]

I think I've found a working solution, not sure if it's the best solution, but it seems to work.

I've created a __layout.svelte in the /todos/[id] folder. In there, in the load function, I call a standalone endpoint (created as /api/todos/[id].json.ts which will take care of fetching the todo by ID. In the __layout.svelte component, I render a Todo component where the todo is passed as a prop. THe last element in the __layout.svelte is a <slot> which will take care of rendering the Edit component.

My routes folder now looks as follows (maybe handy for anyone that has the same usecase)

- /api
    - /todos
        - [id].json.ts
- /todos
    - /[id]
        - /edit
            - index.svelte  
        - __layout.svelte (fetches the todo via /api/todos/[id].json and passes it on)
        - index.svelte (left empty but needed to land on /todos/[id] in the browser)
    - index.svelte