Sveltekit - $app/state

Quiz

The $app/state module in SvelteKit provides three important read-only state objects such as page, navigating, and updated. This chapter provides a brief understanding of how these objects help manage and react to the application's state effectively

Page State

The page object has details about the current page, giving you access to important information needed for displaying and navigating the page.

Key Properties

The following are the key properties of page object:

url: It contains the current URL of the page.
params: It contains the route parameters associated with the current page.
route: It contains information about the current route, including its ID.
status: It contains the HTTP status code for the current page.
error: It contains an error object if there is an issue on the page.
data: It contains data returned from all load functions for the current page.
form: It contains data returned from form actions.

Example Syntax

You can use the following syntax for accessing properties of any page using page object:

<script>
  import { page } from '$app/state';
</script>

<p>Current URL: {page.url.pathname}</p>

{#if page.error}
    <span class="error">Error: {page.error.message}</span>
{:else}
    <span>Status: {page.status}</span>
{/if}

Navigating State

The navigating object shows the current state of a navigation event, including details about the previous route, the target route with its parameters and URL, and the type of navigation (like clicking a link or going back/forward).

Key Properties

The following are the key properties of navigating object:

from: It provides details about the previous route.
to: It provides information about the target route, including its parameters and URL
type: It provides information about the type of navigation (e.g., link click, back/forward navigation).

Syntax Example

You can use the following syntax for accessing properties of state of an ongoing navigation event using navigating object:

{#if navigating.to}
    <p>Navigating to {navigating.to.url.pathname}</p>
{/if}

Updated State

The updated object shows if a new version of the app has been released since the page was first loaded. It has a boolean property such as:

current: It's true if a new version is available; otherwise, it's false.

Syntax Example

You can use the following syntax for accessing the updated state of any object,page or application.

<script>
    import { updated } from '$app/stores';
</script>

{#if $updated}
    <div class="banner">
        <p>New version available!</p>
        <button on:click={() => location.reload()}>Update</button>
    </div>
{/if}

Example

The below example demonstrates the use page object for accessing its properties such as Current path, Full URL, and Search params.

<!-- src/routes/+page.svelte -->
<script>
    import { page } from '$app/stores';
</script>

<h1>Hello World!</h1>

<div>
    <p>Current path: {$page.url.pathname}</p>
    <p>Full URL: {$page.url.href}</p>
    <p>Search params: {$page.url.search}</p>
</div>

<!-- Example with search params -->
<a href="?name=John">Say hello to John</a>

<!-- Access search params -->
{#if $page.url.searchParams.get('name')}
    <p>Hello, {$page.url.searchParams.get('name')}!</p>
{/if}

Output

Print Page