How to Access URL Query String in Svelte?

URL query strings are a way to pass parameters to a web page through the URL. They appear after the question mark (?) in a URL and are typically used to convey data or state between different parts of a web application.

In Svelte, you can access and manipulate these query parameters to dynamically display or process information based on the values provided in the URL.

We can use the following approaches to access the URL query string in svelte:

Steps to Create a Svelte Application

Step 1: Install Node.js

Make sure Node.js is installed on your machine. You can Install node js from official website.

Step 2: Create Svelte Application

Open your terminal and run the following command to set up a new Svelte project:

npx degit sveltejs/template svelte-app

Step 3: Navigate to Your Project Directory

Change to the newly created project directory:

cd svelte-app

Step 4: Install Dependencies

Install the required npm packages:

npm install

Project Structure:

The updated dependencies in the package.json file are:

"devDependencies": {
    "@rollup/plugin-commonjs": "^24.0.0",
    "@rollup/plugin-node-resolve": "^15.0.0",
    "@rollup/plugin-terser": "^0.4.0",
    "rollup": "^3.15.0",
    "rollup-plugin-css-only": "^4.3.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.1.2",
    "svelte": "^3.55.0"
},
"dependencies": {
    "sirv-cli": "^2.0.0"
}

Using window.location.search

In this approach, we are using window.location.search to retrieve the query string from the URL. We then use URLSearchParams to parse the query string and extract the desired parameter, displaying it on the page.

Example: The below example uses window.location.search to Access URL query string in svelte.

<!-- App.svelte -->

<script>
    import { onMount } from 'svelte';

    let query = '';

    onMount(() => {
        // Get query string from URL
        const urlParams = new URLSearchParams(window.location.search);
        query = urlParams.get('query') || 'No query parameter found';
    });
</script>

<style>
    h1 {
        color: green;
        font-size: 36px;
    }

    h3 {
        font-size: 24px;
    }
</style>

<h1>GeeksforGeeks</h1>
<h3>Approach 1: Using window.location.search</h3>

<p>Query Parameter: {query}</p>

Start your Svelte app: Ensure your Svelte app is running on port 8080.

Test URL: Open your browser and navigate to:

http://localhost:8080/?query=gfg

Output:

Using URL API Directly

In this approach, we are using the URL API to directly access and parse the URL's query parameters. By creating a URL object with window.location.href and using URLSearchParams, we can retrieve specific query parameters and display their values on the page.

Example: The below example uses URL API Directly to Access URL query string in svelte.

<!-- App.svelte -->

<script>
    import { onMount } from 'svelte';

    let name = '';
    let age = '';

    onMount(() => {
        const url = new URL(window.location.href);
        const queryParams = new URLSearchParams(url.search);
        name = queryParams.get('name') || 'No name provided';
        age = queryParams.get('age') || 'No age provided';
    });
</script>

<style>
    h1 {
        color: green;
    }

    .container {
        margin-top: 20px;
    }
</style>

<h1>GeeksforGeeks</h1>
<h3>Approach 2: Using URL API Directly</h3>
<div class="container">
    <p>Name: {name}</p>
    <p>Age: {age}</p>
</div>

Start your Svelte app: Ensure your Svelte app is running on port 8080.

Test URL: Open your browser and navigate to:

http://localhost:8080/?name=gfg&age=30

Output:

Conclusion

You can access URL query strings in Svelte by using the URL API directly for structured access or by using window.location.search for a simpler approach. Both methods provide flexibility for handling query parameters effectively in your application.