Setting up Routing in Svelte
Tags: svelte, javascript, routing
Published: 2020-10-15 16:31:36

In this article, i'll provide a quick overview of Svelte then we'll create a very basic Svelte app and add routing to it. Now for those who don't know what svelte app is, Svelte is Front-end JavaScript UI Library. It is not actually a framework, instead Svelte is a compiler that generates minimal and highly optimized JavaScript code.

> Introduction

Svelte is a new approach to building UIs. Instead of using Virtual DOM, it compiles the code and ships framework-less vanilla JavaScript which makes it faster and lighter than other frameworks or Libraries like React or Vue. It is gaining very much popularity due to its easy learning curve and a very easy state management.

> Setting Up

Now, in order to create an svelte app, we just basically have to clone the template from github. In order to do so, navigate into the directory in which you want to create the project and run 

```
npx degit sveltejs/template my-svelte-project
```
You can change 'my-svelte-project' to any name you want. Now, next you have to navigate into the recently created template folder and run the package installations

```
cd my-svelte-project
npm install
```
This will install all the required dependencies and then we can run the project by using the command

```
npm run dev
```
This will fire-up the server and the project will be running on port 5000 by default. Visit *http://localhost:5000/* in your browser and you will see our app running.

> Creating components

Now, the next step is to create components. We'll create **component** folder inside *src* and place all our components there. Also we'll be needing a folder called **routes** to place our router file. So let's create all the Files and folders necessary. You can use GUI or simply enter the following commands

```
mkdir src/component
mkdir src/routes
touch src/component/About.svelte src/component/Home.svelte src/component/Blog.svelte

touch src/routes/index.svelte
```
This will create all the files and folders required. We also need a package called *svelte-routing* in order to implement routing. In order to install the package, run

```
npm install svelte-routing
```

Now since all our files and folders are set up and *svelte-routing* has been installed, we can head towards configuring *routes/index.svelte*

> Configuring Routing

Add the following code in *routes/index.svelte* file

```
<script>
  import { Router, Route } from 'svelte-routing';
  import Home from '../components/Home.svelte';
  import About from '../components/About.svelte';
  import Blog from '../components/Blog.svelte';

  export let url = '';
</script>

<Router {url}>
  <div>
    <Route path="blog" component={Blog} />
    <Route path="about" component={About} />
    <Route path="/" component={Home} />
  </div>
</Router>
```
What we're doing here is, We're importing all our created components and also the bringing in *Router* and *Route* from *svelte-routing* which are necessary classes in order to configure routing. Then we're setting up path for each component and pointing to load the respective component in their respective path.

Now, it's time configure the Components.

> Configuring Components

First we've to configure the *App.svelte* since it's the root component. Replace all the code of *App.svelte* with 

```
<script>
  import Router from './routes/index.svelte';
</script>

<style>
  main {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;
  }
</style>

<main>
  <Router />
</main>
```

Basically, we're just bringing in the router we created and loading Router as root component. Now, let's configure other components.

Almost all the components will be of same structure since its just a demo application. So let's configure our *Home.svelte*. Add the following codes to this file

```
<script>
  import { Link } from 'svelte-routing';
</script>

<div>
  <h3>This is HomePage</h3>
  <Link to="blog">Blog</Link><br />
  <Link to="about">About</Link>
</div>
```
So in order to go to another Route, we need something called *Link* then we points to which component it should redirect. That's all we're basically doing here.

*Blog* and *About* component also will have similar structure.

```
// Blog.svelte
<script>
  import { Link } from 'svelte-routing';
</script>

<div>
  <h3>This is Blog Page</h3>
  <Link to="/">Home</Link><br />
  <Link to="about">About</Link>
</div>

// About.svelte

<script>
  import { Link } from 'svelte-routing';
</script>

<div>
  <h3>This is About Page.</h3>
  <Link to="/">Home</Link><br />
  <Link to="blog">Blog</Link>
</div>

```

Now, we're all set. save all the files and test it. All the links should be working and you should be able to switch between apps. You can demo the project  [Here](https://svelte-routing-red.vercel.app/).

 [Here's](https://github.com/rajandmr/Svelte-Routing)  the source code for the project