Routing is a common feature in most web applications, and it is implemented differently depending on the Javascript framework being used. For example, in React.js.

It is important for developers to understand how routing works in order to build a functional and effective web application.

In this tutorial, we are going to learn how to handle page routing in svelte

Prerequisites

1. Download a code editor of your choice, I prefer Visual Studio Code.

2. Understanding of Svelte.

3. Have node.js installed on your local machine.

Why should developers understand routing?

1. Routing is essential for organizing the structure of a web application and making it easier to navigate between different pages and features of the application.

2. Routing helps to improve the performance of a web application by allowing the developer to optimize the loading of resources.

3. Routing can be used to implement security measures, such as restricting access to certain pages.

4. Routing is necessary for optimizing SEO (Search Engine Optimization). Proper routing allows search engines to index the different pages of a website, which improves the website's visibility in search results.

5. Routing allows developers to break up a large and complex application into smaller, more manageable chunks, which can make it easier to develop, maintain, and update the app without affecting the rest of the application.

How to route using svelte

To implement routing in a Svelte application, use a routing library called svelte-navigator.

What is Svelte Navigator?

svelte-navigator is a lightweight routing library for Svelte that makes it easy to define routes and navigate between different parts of your Svelte app. It is a popular choice for routing in Svelte because of its simplicity and ease of use.

How it is used

• First, install or run the following command in your terminal

    npm install --save svelte-navigator
  

  After this is installed it will be added as part of your project dependencies

  

When this is installed you can now work with it

Next in your root file:

• Import the svelte-navigator

• The pages you want to route to.

App.svelte

<script>
    import { Route, Router } from 'svelte-navigator'
    import Header from './components/Header.svelte';
    import About from './pages/About.svelte';
    import Homepage from './pages/Homepage.svelte';
</script>

<main>
    <Router>
        <Header/>
        <Route path="/homepage">
            <Homepage/>
        </Route> 
        <Route path="/about">
            <About/>
        </Route>
    </Router>
</main>
<style>
    main{
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items: center;
        margin-top:100px;
    }
</style>

• Next, we will create a Header.svelte component, this component contains the pages we are going to link to.

To do this first of all we will import the Link ( the Link comes with the router installed, similar to an anchor tag in HTML)

Header.svelte

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

<div>
    <Link to="/homepage">Homepage</Link>
    <Link to="/about">About</Link>
</div>
<style>
    div{
        font-size: 25px;
    }
</style>

Result

Conclusion

In conclusion, routing is a fundamental concept in web development that allows you to divide your application into smaller, more manageable pieces.

By using routing, you can reduce the overall complexity of your app and make it easier to update and maintain it in the long term.

Knowing how to route is an important skill for any web developer to have in order to build effective and scalable web applications.

Resources

To learn more about Svelte Complier, visit the official documentation of Svelte or a Tutorial Video by Net Ninja

For routing: svelte-navigator.

Thanks for reading💖