Path keeps changing when updating query params #150

Luksch187 · 2025-01-13T18:28:35Z

Luksch187
Jan 13, 2025

Everytime I update the query params, the path changes from /market to root / and append the query params instead of keeping the path. And i can't figure out how to prevent this.

Here's my code:

<script lang="ts">
import { page } from "$app/state";
import { queryParameters } from 'sveltekit-search-params';

const params = queryParameters({
        name: true,
        price_min: true,
        price_max: true,
        sort_by: true,
        sort_direction: true,
    });
</script>


<Select.Root
            type="single"
            bind:value={filterManager.sortByFilter.sort_by.selected}
            onValueChange={() => {
                $params.sort_by = filterManager.sortByFilter.sort_by.selected;
            }}
        >
</Select.Root>

When I now manually change the select option the page will do i full reload from localhost:5173/market to localhost:5173/?sort_by=price

Any help appreciated

Answered by Luksch187

Jan 14, 2025

I found it, crazy annoying:

I had this in my app.html:

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<base href="/" />
		%sveltekit.head%
	</head>
	<body data-sveltekit-preload-data="hover">
		<div style="display: contents">%sveltekit.body%</div>
	</body>
</html>

and the <base href="/" /> is what caused it.

View full answer

paoloricciuti · 2025-01-13T18:50:16Z

paoloricciuti
Jan 13, 2025
Maintainer

I don't think this code is enough to determine what's going on...can you provide an actual reproduction?

0 replies

Luksch187 · 2025-01-14T16:47:19Z

Luksch187
Jan 14, 2025
Author

I am trying to reproduce the behaviour on a fresh svelte repo, but somehow it works with the exact same code. Must be something external. I guess you can close this.

Thanks for answering though

2 replies

paoloricciuti Jan 14, 2025
Maintainer

Thanks...let me know if you find a reproduction i'll take a look

Luksch187 Jan 14, 2025
Author

I found it, crazy annoying:

I had this in my app.html:

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<base href="/" />
		%sveltekit.head%
	</head>
	<body data-sveltekit-preload-data="hover">
		<div style="display: contents">%sveltekit.body%</div>
	</body>
</html>

and the <base href="/" /> is what caused it.

Answer selected by Luksch187

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Path keeps changing when updating query params #150

{{title}}

Replies: 2 comments 2 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Path keeps changing when updating query params #150

Luksch187 Jan 13, 2025

Replies: 2 comments · 2 replies

paoloricciuti Jan 13, 2025 Maintainer

Luksch187 Jan 14, 2025 Author

paoloricciuti Jan 14, 2025 Maintainer

Luksch187 Jan 14, 2025 Author

Luksch187
Jan 13, 2025

Replies: 2 comments 2 replies

paoloricciuti
Jan 13, 2025
Maintainer

Luksch187
Jan 14, 2025
Author

paoloricciuti Jan 14, 2025
Maintainer

Luksch187 Jan 14, 2025
Author