What is Routing
Routing is a concept that exists in server-side applications for a long time.
In a short version, it's the concept of mapping URL patterns to parts of your application.
Why we should use Routing in SPA
Routing is not an obligation to have in your SPA(single page application), but sure is something worth your time. You and your SPA users will appreciate that you took the time to implement this.
Take a look at this example of a SPA without Routing:
You have the following website → yourwebsite.com
You have a Landing Page, an About Page to talk about yourself, and a Blog Page where you share your posts.
Now imagine that they want to go to your Blog Page to check your latest Post. So they click your "Blog button" and they see this.
Everything seems fine, you could manage the views with some "if" statements and everything is in place. Until someone tries to share the post or bookmark it. Look at the URL at the top of the image.
It says: "yourwebsite.com/".
Guess what will show up when you enter URL in a different tab and press enter? Yes, it will show the landing page.
Why? Because we are not saving the state into the only thing that at the moment survives a reload, the URL.
This is why URLs are much more than just the text that shows in the Address bar, it's the state of your application at that exact point(not all the state, but the minimum that you need to get the user back into the point they left).
How a routing will help you
As I said before, routing is the concept of mapping URL Patterns into parts of your application and should match the state of your application at that exact point.
Probably a good URL for when you are at the Blog page could be → yourwebsite.com/blog
Now, when someone enters that your, you know what they are looking for, they want to see the blog page from your website, so you just have to read the URL and show whatever is supposed to be there.
Now imagine that they click in the "Post 1" and move there.
Now the URL needs to have something that identifies the Post that they want to see, maybe → yourwebsite.com/blog/post-1
Again, this way you know what they are looking for. They want to see the post with the title: post-1 (to be used this way, this needs to be a unique identifier and we only use it to identify post-1)
Let's break down the URL at this page:
- yourwebsite.com/ → this is your domain, where your app lives on the webs.
- /blog/ → this is your page with all your blog posts
- /post-1 → this is your latest blogpost
With a URL like this, your SPA will be able to read it and know what information should be shown. Not always the landing page, but a specific page.
How to achieve this
To make URLs have our state we need to do two possibilities:
- Use the HistoryAPI to change the address bar, add our state to our URL, and read from it to know what to display.
- A library that helps us manage the routing.
History API
This API was introduced with HTML5 and gave us two methods to manage our URLs, pushState() and replaceState().
To achieve our goal we will need to use the pushState() method. This will allow us to add a new entry in the History of the browser, in our case, this means a new page.
The pushState() method takes three parameters: a state object, a title(ignore by all but safari), a URL.
For our example, we will only require to call it with the URL param. To do that we write this.
pushState('', '', '/blog/');
This line will create a new entry "yourwebsite/blog/" with the usage of the History API.
Imagine the list of your browser history, the pushState() will put a new entry on top and set our address bar to that newly created entry.
A library that does the heavy lifting
Implementing this by yourself with history.pushState() is something that takes a lot of time.
If you are working with SPA, you are probably working with libraries like React, Vue, Svelte, etc.
Those libraries already have good community projects that give us this out of the box without the need to use the time that would be better off investing in your website.
I would say, React-router for React, Vue-router for Vue.
In the case of Svelte, if you need only Client-Side Rendering use svelte-spa-router, if you need server-side-rendering you can use svelte-routing or Sapper, but the later being a framework that you work on top off.
Thanks for reading this blog post, I hope that I could how we can achieve a good routing in SPAs. After this, I will show you how we can implement Routing with Svelte and svelte-spa-router.
I will be posting more content related to Svelte and how to work with it in the next weeks, feel free to follow me here and/or in my twitter.
Looking forward to hearing your thoughts regarding this article and Svelte, share experience with this awesome tool.
Top comments (1)
Nice post! Very helpful for a beginner 👍