How to access a URL parameter in Sapper outside of script module
Suppose you’re building a Svelte application using Sapper, and you have a dynamic page route, for example /routes/[id].svelte
.
You want to get the dynamic part of the URL (the id
in this case), and you know you can get it in the preload()
function in the <script context="module">
part of the component:
<script context="module">
export async function preload({ params }) {
const { id } = params
}
</script>
But the problem is that you need to use it outside of preload()
, to perform something else.
The way to do so is to return it from preload
, and define it as a prop of the component, using the usual export *
syntax.
Here’s an example:
<script context="module">
export async function preload({ params }) {
const { id } = params
return { id }
}
</script>
<script>
export let id
if (typeof window !== 'undefined') {
alert(id)
}
</script>
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025