diff --git a/src/App.svelte b/src/App.svelte
index be0e5c5..21b127c 100755
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -222,8 +222,14 @@
 	<div class="meat">
 		<Sidebar />
 		<div class="flex size-full min-w-0 flex-col">
-			<Route route="/playlist/:playlist_id" component={TrackList} />
-			<Route route="/artists" component={ArtistList} />
+			<Route route="/playlist/:playlist_id">
+				{#snippet children({ playlist_id })}
+					<TrackList params={{ playlist_id }} />
+				{/snippet}
+			</Route>
+			<Route route="/artists">
+				<ArtistList />
+			</Route>
 			{#if media_keys_result}
 				<div class="shrink-0 overflow-hidden">
 					<div
diff --git a/src/lib/Route.svelte b/src/lib/Route.svelte
index 66a5422..607bd19 100644
--- a/src/lib/Route.svelte
+++ b/src/lib/Route.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { SvelteComponent } from 'svelte'
+	import type { Snippet } from 'svelte'
 	import { url_pathname } from './router'
 
 	interface Props {
 		route: string
-		component: typeof SvelteComponent<Record<string, unknown>, Record<string, unknown>>
+		children: Snippet<[Record<string, string>]>
 	}
 
-	let { route, component }: Props = $props()
+	let { route, children }: Props = $props()
 
 	function parse(pathname: string) {
 		const params: Record<string, string> = {}
@@ -31,6 +31,5 @@
 </script>
 
 {#if params}
-	{@const SvelteComponent_1 = component}
-	<SvelteComponent_1 {params} />
+	{@render children(params)}
 {/if}