Passing mulitple parameters to dynamic route in Svelte

Question

I am trying the first project with Svelte and I have a situation like this:

I fetch a list of results from an API like here:

# Page with a list of items

<script context="module">
  export const load = async ({ page, fetch }) => {
    const res = await fetch(`url`);
    const items = await res.json();
    return {
      props: {
        items,
      },
    };
  };
</script>

<script>
  export let items;
</script>

{#each items.data as { id, item, href }}
    <li>
      <a href="/page/{href}">{ item }</a>
    </li>
{/each}

I am trying to pass multiple parameters to the next (dynamic) route so that href is the slug and id is the id for fetching the item details from the API like here:

# Page with a single item

<script context="module">
  export const load = async ({ page, fetch }) => {
    const slug = page.params.slug; <-- I can get this
    const res = await fetch(`url/${page.id}`); <-- but not this
    const data = await res.json();
    return {
      props: {
        data,
      },
    };
  };
</script>

I apologise for my ignorance but I am really struggling and I do not know how to address this exactly. I would appreciate any hints.

Gavin · Accepted Answer · 2023-12-27 12:14:04Z

2

Most recent version of SvelteKit simplifies this further (December 2023).

File structure like so:

src/
└── routes/
    └── [siteId]/
        └── [projectId]/
            ├── +page.server.ts
            └── +page.svelte

Gives you access like so:

+page.server.ts:

// +page.server.ts
export async function load({params}) {
    const siteId = params['siteId'] as string
    const projectId = params['projectId'] as string

    return {siteId, projectId}
}

+page.svelte:

<!-- +page.svelte -->
<script lang="ts">
    export let data

    const siteId = data.siteId
    const projectId = data.projectId
</script>
<p>siteId: {siteId}, projectId: {projectId}</p>

Now you can navigate to http://localhost:5173/some-site-id/some-project-id and pull out the params as expected.

edited Dec 27, 2023 at 12:14

answered Dec 23, 2023 at 13:53

Gavin

2,3852 gold badges19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stephane Vanraes · Accepted Answer · 2023-02-03 06:53:33Z

There are two options for this

One is to have a second 'slug', this would mean you have a file structure like /page/[slug]/[id].svelte, in that case you can simply do const { slug, id } = page.params; and your anchor becomes <a href="/page/{href}/{id}">. This has the disadvantage that you still have to find a way to handle if people browse to /page/{href} without passing an id.

Another option is to pass the id as query parameter, here your anchor would be <a href="/page/{href}?id={id}"> the files are like what you have and you get the query parameter as follows const id = page.query.get('id'). Here you still have to handle if people come to this page without having an id, but in that case id will be undefined, so it's perhaps a touch easier to handle.

Update 3 Feb 2023

SvelteKit has changed a bit since this answer. The most important one being that the load function is no longer in a script with 'context="module"' but instead in it's own file.

The load function itself for both options still looks very similar:

export const load = (async ({ params, url }) => {
  // option 1
  const { key, title } = params;
  // option 2  
  const title = params.title;
  const id = url.searchParams.get('id');
}

Collectives™ on Stack Overflow

Passing mulitple parameters to dynamic route in Svelte

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related