SvelteKit makes three readonly state objects available via the $app/state module — page, navigating and updated. The one you’ll use most often is page, which provides information about the current page:

• url — the URL of the current page
• params — the current page’s parameters
• route — an object with an id property representing the current route
• status — the HTTP status code of the current page
• error — the error object of the current page, if any (you’ll learn more about error handling in later exercises)
• data — the data for the current page, combining the return values of all load functions
• form — the data returned from a form action

Each of these properties is reactive, using $state.raw under the hood. Here’s an example using page.url.pathname:

<script> import { page } from '$app/state';  let { children } = $props(); </script>  <nav> <a href="/" aria-current={page.url.pathname === '/'}> home </a>  <a href="/about" aria-current={page.url.pathname === '/about'}> about </a> </nav>  {@render children()}

<script lang="ts"> import { page } from '$app/state';  let { children } = $props(); </script>  <nav> <a href="/" aria-current={page.url.pathname === '/'}> home </a>  <a href="/about" aria-current={page.url.pathname === '/about'}> about </a> </nav>  {@render children()}

Prior to SvelteKit 2.12, you had to use $app/stores for this, which provides a $page store with the same information. If you’re currently using $app/stores, we advise you to migrate towards $app/state (requires Svelte 5).