Client Side Routing in Svelte

In layman's terms, the performance on the Frontend of a website is directly affected by things, like the number of pages loaded initially, the amount of data fetched and displayed and the time taken to switch from one page to another.

Client-side rendering and routing give a subtle sense performance of your application and it's essential to use the power of your Frontend framework to your advantage.

Up until this point, assuming that you have dealt with simple projects that do not require transitioning from one view to another, you are yet to interact with Routing in Svelte using Page.Js.

Page is a small client-side routing library that can be used when building single page applications (SPAs). It has a simple API which is inspired by Express. It utilises the HTML5 history API under the hood, which is what allows you to build smooth user interfaces while still having linkable URLs for different pages of the app.

We will also need to make a some changes to our scripts in the package.json file to ensure that a page that we've navigated to before reloads. Open up your package.json and edit the following line in scripts:

To append the --single option in start script, add:

The scripts are now ready.

You can also go to src/main.js and remove props from that file as we are not using them. Now your main.js would look like this →

These files have components which will be rendered as routes.

Now make a route.js file in src folder and import all the routes that you have defined in your app, and then render these routes through array.

Make sure to give each route a:

• path (Link to open route in your app)
• component (Component to be rendered)
• auth (This would define whether route is private or public. Its' value will be true for private routes)

Now, it's time to render all the routes and their respective params (if any provided in their url). For example: SingleBlog component above has id as params.

Now, go to your app.svelte file and add the following lines of code:

This will be the header of our app and will be rendered on all (private and public) routes because it contains links to all routes.

Post that, write the following lines of code below the header:

The svelte:component element renders a component dynamically using the component constructor specified as the this property. When the property changes, the component is destroyed and recreated. If this is false, no component is rendered.

You can read more about svelte:component from here: https://svelte.dev/docs#svelte_component

Now, create script tags at the top of file and import router from page and routes from routes.js. This is how it will look like:

Now add the variables page, params and user to the script tag like this:

Finally, add the logic to render the routes in the script tag:

In the above lines of code, first we loop around all the routes defined in the routes.js, create a new instance of route() for any paths defined and then pass through any variables such as id which were defined in our array.

Finally, we check to see if authentication is required and if the user object exists. If not valid, we redirect to the login page. If so, we set the page variable to the component and then pass this through.

To add more routes in future, simply edit routes.js by importing the new component and creating a new child in the array.

Once you have all your routes defined, you need to start the router, which is done with another call to page as router.start().

This is how your app.svelte would look like:

Your /blog route is now officially set up and would look like this (by clicking on links in the blog page, you can go to a single blog page).

An unauthenticated user will not be able to access a private route. If you want to access a private route, you can manually do this by setting user variable as true in App.svelte file. This is how it looks like:

...and that's it! You have successfully routed different pages in a simple SPA.

Thsi is the link to my repo:

https://github.com/aryankush25/svelte-routing-boilerplate.

you can find the code for each styling pattern in the corresponding branches.

Thank you for reading. I hope this article has helped you understand routing in Svelte and how you can create SPAs fast and efficiently.