Svelte dynamic routing: passing extra parameters with goto

Question

The end goal is to be able to use the item name in the URL and pass the id to the component.

Currently, I'm using a table that shows a list of items. When the user clicks on a row, it will go to the details page of that item.

    function toDetailsRoute(id, name) {
        goto(`/clients/details/${name}`);
        // somehow pass the id to the component without placing it in the url
    }

This will use the details/[item].svelte component where the onMount lifecycle will use a GET request that takes the id as the parameter. I don't want to use the id in the URL because it's a Guid and looks massive.

The other option would be to generate a client facing ID on the backend when creating the item that the front-end can use. But I want to make sure that there is no other way to pass the id to the component first before attempting that.

Answer 1

This is a bad idea, as it breaks URL navigation.

• Refreshing the page will no longer work without workarounds
• The page cannot be bookmarked or shared with other people

If you really want to do this anyway, you could set the ID in a cookie, for example. The route would no longer trigger, so the file would have to be renamed.