Client Side Routing?
Client Side Routing is the ability to move between different parts of an application when a user enters a URL or clicks an element (link, button, icon, image etc) within the application. It's the process through which the user is navigated to different pages on a web application.
It allows us to build a single-page web application with navigation without the page refreshing as the user navigates.
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.
Setting Up Our Environment
To start, we need to install Page.js. Open up your terminal in the root directory of your svelte project and run the following:
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 →
Now, let's create some components that we will render as routes. Go to your
src folder, make a new directory named
routes and then add the following files:
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:
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.
script tags at the top of file and import
router from page and
routes.js. This is how it will look like:
Now add the variables
user to the script tag like this:
Finally, add the logic to render the routes in the
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
This is how your
app.svelte would look like:
/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
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:
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.