Walking down the Svelte Route

Wondering how routing can be implemented in Svelte? How the svelte routing package can come to your rescue? Let me help you. I will walk you through implementing the Svelte routing package through a simple example. You should have a basic understanding of Svelte, if you don’t know how to work with svelte you can check Quick Start with Svelte. If you’re new to Svelte Routing and have no idea what it is, well, keep reading.

I have a basic app setup for Svelte using the steps here. Now, diving directly to the routing part.

There are multiple ways to add routing in svelte. However, 2 of the commonly used ones are:

1) Sapper — a framework built on top of svelte by the svelte team and it by default renders server-side first (SSR).

2) Svelte-Routing — a declarative Svelte routing library with SSR support

We will be taking the “Svelte-Routing” path in this article.

Installation

We will start by installing the svelte routing package to our existing project. Open your favorite terminals and navigate to your project folder. I am using NPM to install the package, but you can use whichever suits you. Run the below command

npm install svelte-routing

This will add necessary routing configuration to package.json and add packages to the node-modules folder.

Now you have the power, let us start using it!

Integration

Next, create a component. Navigate to the src folder inside your project and create a component folder. At this level, I will add two components Home.svelte and About.svelte for the demo purpose.

Time to see some code!

Home.svelte

About.svelte

App.svelte

Great …! Our base component is now ready to route, now to configure Router in the App.svelte component along with import base component in App.svelte component:

Taking a quick detour and explaining a few fundamental concepts in routing.

· Router — The Router component supplies the Link and Route descendant components with routing information through context, so you need at least one Router at the top of your application. It assigns a score to all its Route descendants and picks the best match to render.

· Link — A component used to navigate around the application, it has some properties like “to”, “replace”, “state”, “getProps”

· Route — A component that will render its component property or children when its ancestor Router component decides it is the best match. it’s internally using some property to set the route like “path” and “component” which we will see in action below.

OK, coming back to track!

Did you notice that we have exported URL variable in a script tag? Well, it is required because this “URL” property is used in SSR(server-side rendering) to force the current URL of the application and that will be used by all Link and Route descendants

We have imported the package and base component in App.svelte component and now the idea is to set up two links(home, about) in navigation where when we click, it redirects to their corresponding components.

So now we configure that in root component which is App.svelte :

Voila! This is it…! 😊 We have successfully set up the Svelte Routing in our application, now reload the page.

Oops, we are getting a 404 error😨 no worry To fix this problem we need to do a few more changes in exiting or in new components:

1) We need to create the server.js file in the root of the application and put the below code in it:

Basically this code renders the application all the time in the index.html

2) Put the Hydrate option as true in main.js where you have set the new app Constance like below:

3) Update the rollup.config.js and add “hydratable” as true. By adding this we make sure that the application is compiled as hydratable.

So the Hydrate option guild Svelte to update existing DOM rather than creating new elements in DOM. It will also only work if the component was compiled with the hydratable: true.

4) We just have to make sure your server is serving the “index.html” to all the given routes not only for “/” route, so the last change that needs to be done in the “package.json” file where the “start” property is added we just need to add the “-s” argument.

"start": "sirv public -single"

“-s” Serve as single page application with “index.html” fallback.

Now, reload!!

Ah ha! Now it works like a charm!

Conclusion

We saw how easy it was to create routing in our application using the svelte routing package.

As mentioned earlier another option sapper is also available. It is also a good framework but we have to build a sapper project on top of svelte and sapper is in early development and there might be some changes in the future.

If you want to know more about it you can try sapper.

Thank you for reading my article. I hope it will help you to implement svelte Routing successfully in your application.