This tutorial shows how to add routing to a svelte application.

There are multiple ways we can add routing

  • Sapphire:
  • Svelte-routing:

Create a svelte application

Type the following command to create a svelte application.

A:\work\w3schools\svelte>npx degit sveltejs/template svelte-routing-example
Need to install the following packages:
  degit
Ok to proceed? (y) y
> cloned sveltejs/template#HEAD to svelte-routing-example
>

Once an application, Change to the application folder with the below command

A:\work\w3schools\svelte>cd svelte-routing-example

Start the application using npm run start

A:\work\w3schools\svelte\svelte-routing-example>npm run start

> [email protected] start
> sirv public --no-clear


  Your application is ready~! 🚀

  - Local:      http://localhost:5000
  - Network:    Add `--host` to expose

────────────────── LOGS ──────────────────

Application is starts at port 5000 and accessible at http://localhost:5000.\

You can check here for more understanding of folder structure and the hello world application example.

Create a Components

In the Application, Go to the src folder, Create two components

  • home.svelte
  • contact.svelte

home.svelte

contact.svelte