Congratulations, you started working with one of the popular front-end frameworks. Both Vue and React are excellent choices to create rich and reactive applications. But sometimes, you ‘just’ want to show the user another page. Whether it is a simple about page, or another ‘section’ in the app. In this post I will cover both Vue en React and, little bonus, “React on steroids”, NextJS.
It is important to know that you need a router to make in-app pagination work. If you look up router and your favourite framework you’re probably find a way to do it, accompanied with some ways to actually not do it. Hence, here I’ll focus on the right way.
The basics of every link
<a href="https://example.com">Example link</a>
So why is this important? On parsing code presented as above, the browser does the following:
- It colours the links (typically) blue & underlines them (styles them as links).
- On mouse-over you get a little hand-pointer
- When using the keyboard you can ‘tab’-to the link.
- Text-to-speech engines can announce it as being a link
- Search engines can follow the link (may, but not always, require server-side rendering)
While the code above looks easy, it is easy with modern frameworks to create something like this:
<div onclick="open('https://example.com')">Example link</div>
This is clickable, and yes, it might navigate you to example.com, but shares none of the desirable characteristics of the well known hyperlink.
The boring fact…
The boring fact is that the above code, yes with the <a href=..., works in every framework. In the next few posts I’ll dive into the ways to make it work more natively in the frameworks mentioned earlier, often resulting in much faster page loads when you stay within your React/Vue or whatever application. Also, I’ll give a bit of a review of the good parts of these and make sure you don’t use the bad parts (if any). To stay up to date, make sure you subscribe to my mailinglist!
Like what I'm writing? Don't miss my next post and subscribe to my list to get more helpful articles in the future!