Svelte Dynamic Route Param - Passing Multiple Params?

Question

Is there a way to pass multiple params into a dynamic route?

For example I have a search result page that is looping through results

{#each results as result}
  <a href="../book/{result.key}">
    {result.title}
  </a>
{/each}

I am passing the key to a [slug] route and I am using the key to call an API.

My end goal is to have the result.title be the dynamic route param, but I also want to pass the result.key so I am able to call the API.

This post: Passing mulitple parameters to dynamic route in Svelte is over a year old and I was wondering if there is now a way to do this and I would like to keep the route as /title instead of /title/key or /key/title as suggested in that post.

Stephane Vanraes · Accepted Answer · 2023-02-03 06:50:44Z

1

You will have to embed both of them somehow in the URL. Perhaps a construction like /book/<title>?key=<key> would do for you ? I notice that would be the 'other option' from the post you linked, but the answer there is outdated.

Nowadays you would either in +page.sveltejs or +page.server.js do

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

But here you would have to be aware that key could be empty.

One last option (that I personally don't like) is to have the urls in the form of /book/<title>-<key>, this is something you sometimes see with product sites.

In this case your file will be called /book/[title]-[key]/+page.svelte

And you just extract the params as normal:

export const load = (async ({ params }) => {
  const { key, title } = params;
}

answered Feb 3, 2023 at 6:50

Stephane Vanraes

16.5k3 gold badges34 silver badges51 bronze badges

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

Collectives™ on Stack Overflow

Svelte Dynamic Route Param - Passing Multiple Params?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related