Navigating Between Pages

In the previous chapter, you created the layout and the dashboard pages. Now let's add some links to allow users to navigate between the dashboard routes.

Why Optimize Navigation?

Traditionally, to create links between pages, you would use the HTML <a> element. Currently, the links in the sidebar use <a> elements, but notice what happens when you navigate between the homepage, invoices, and customers in your browser.

Did you see it?👀

There's a full page refresh on each navigation! This is not ideal as it can slow down the user experience and increase page loading times.🚤

The <Link> component 🖇️

In Qwik City, you can use the <Link> component to create links between the pages of your application, thus enabling client-side navigation with JavaScript without a full page reload. This component is essential for a smooth and modern user experience.

To use the <Link> component, open the file src/components/ui/dashboard/nav-links.tsx and import the Link component from @builder.io/qwik-city. Then, replace each <a> tag with <Link>:

As you can see, the Link component is similar to using <a> tags, but instead of <a href="…">, you use <Link href="…">.

Save your changes and check to see if it works in your localhost. You should now be able to navigate between the pages without seeing a full refresh. Although parts of your application are rendered on the server, there's no full page refresh, making it feel like a web app. 🚀

When to use <a> instead of <Link> 🔄

It is important to note that in Qwik, full page reloads are extremely optimized and often faster than traditional SPA navigation due to its capability for progressive resumption from serialized state in the DOM.. Therefore, in some cases, it might be beneficial to use <a> tags for quicker and more direct interactions. This differs from most SPA frameworks where avoiding a full page reload is crucial to maintain performance. 🔍

Displaying an Active Link 🌟

A common UI pattern is to show an active link to indicate to the user what page they are currently on. In Qwik City, you can use the useLocation() function that can use the current URL to determine which link is active.

To display an active link, import the useLocation() function from @builder.io/qwik-city and use it to determine the active link. Here's how you can update the NavLinks component to display an active link:

Next, assign the path to a variable called pathname inside your <NavLinks /> component:

Here are some key points about this code:

• We use the useLocation() function to get the current URL.

• We extract the pathname from the URL object.

Now, you can use the pathname variable to determine which link is active. For example, you can add a conditional class to the active link:

Save and check your localhost. You should now see the active link highlighted in blue, BUT as you can see, this doesn't work!!😱

Don't panic! If you show the resultat of the console.log("pathname", pathname); you will see that the pathname is not the same as the link href. This is because the pathname finish with a "/" and the link href doesn't. To fix this, you can for example delete the "/" from the end of the pathname:

Now, the active link should be highlighted when you navigate to different pages.🥹

This is a simple way to display an active link in your navigation menu. You can customize the styling further to suit your application's design.💅

How navigation works in Qwik-City

When a user clicks on a <Link> component, Qwik City effectively intercepts the click event and navigates to the specified URL without reloading the entire page. This SPA-like navigation allows users to maintain their current state without the overhead associated with full page reloads in other frameworks.

Qwik optimizes even full-page reloads to be extremely cost-effective, challenging the common practice in other frameworks where such reloads are heavy and slow due to the need for JavaScript to rehydrate and re-execute. In Qwik, full-page reloads are so optimized that they often provide the most responsive interactions.

By using the <Link> component, you can create a seamless navigation experience for your users, improving the overall performance and usability of your application.🚀 By leveraging the <Link> component and the useNavigate() API, Qwik City ensures that navigation is handled efficiently, updating the URL in the browser's address bar without the traditional drawbacks of SPA navigation, thereby enhancing the overall user experience.

Recommended reading

Interested in learning more about these areas? Below are some helpful resources to enhance your understanding:

• Qwik Docs API Link
• Qwik Docs Cookbook Nav Link

Source code

You can find the source code for chapter 5 on GitHub.