Qwik JS Tutorial – Part 6: Routing in Qwik

Introduction

Routing is a fundamental part of any modern web application. It determines how users navigate between pages, how URLs are structured, and how content is rendered based on a request. In Qwik, routing is handled through Qwik City, which provides a file-based routing system designed to work seamlessly with server-side rendering and resumability.

In this detailed guide, we will explore how routing works in Qwik, how file-based routes are structured, how to create dynamic routes, how layouts function, and how to work with route parameters and query strings.

Understanding Qwik City

Qwik City is the routing and meta-framework layer built for Qwik applications. It enables:

• File-based routing
• Server-side rendering (SSR)
• Static site generation (SSG)
• Nested layouts
• Route data loading

Qwik City is included when you create a Qwik application using the official starter template. It allows developers to define routes simply by creating files inside the src/routes directory.

File-Based Routing in Qwik

File-based routing means that your folder and file structure directly define your application URLs.

Basic Example

If you create the following file:

src/routes/about/index.tsx

It will be accessible at:

https://yourdomain.com/about

Similarly:

src/routes/contact/index.tsx

Becomes:

https://yourdomain.com/contact

This approach simplifies route management and improves project organization.

Creating a Simple Route

Inside src/routes/about/index.tsx:

import { component$ } from '@builder.io/qwik';

export default component$(() => {
  return (
    <div>
      <h1>About Page</h1>
      <p>This page is rendered using Qwik routing.</p>
    </div>
  );
});

When a user visits /about, Qwik renders this component.

Nested Routes in Qwik

Nested routes allow you to structure complex applications cleanly.

Example structure:

src/routes/blog/index.tsx
src/routes/blog/post-1/index.tsx

Routes generated:

• /blog
• /blog/post-1

This makes it easy to build sections such as blogs, dashboards, or documentation areas.

Dynamic Routes

Dynamic routes allow URLs to include variable segments, such as IDs or slugs.

Example: Blog Post by Slug

Folder structure:

src/routes/blog/[slug]/index.tsx

If a user visits:

/blog/hello-world

The value hello-world becomes available as a route parameter.

Accessing Route Parameters

import { component$ } from '@builder.io/qwik';
import { useLocation } from '@builder.io/qwik-city';

export default component$(() => {
  const location = useLocation();
  const slug = location.params.slug;

  return (
    <div>
      <h1>Blog Post: {slug}</h1>
    </div>
  );
});

Dynamic routes are useful for:

• Blog systems
• Product pages
• User profiles
• Content management systems

Layouts in Qwik

Layouts allow you to define shared UI elements across multiple routes.

For example, you may want:

• A common header
• Navigation bar
• Footer

Creating a Layout

Create a file:

src/routes/layout.tsx

Example layout component:

import { component$, Slot } from '@builder.io/qwik';

export default component$(() => {
  return (
    <div>
      <header>
        <h1>My Qwik App</h1>
      </header>
      <main>
        <Slot />
      </main>
      <footer>
        <p>© 2026 My Application</p>
      </footer>
    </div>
  );
});

The <Slot /> component renders the current route’s content inside the layout.

Layouts can also be nested for more complex applications.

Route Parameters vs Query Strings

It is important to understand the difference between route parameters and query strings.

Route Parameters

Defined inside brackets:

/blog/[slug]

Accessed using:

location.params.slug

Query Strings

Example URL:

/blog?category=tech

Accessed using:

const category = location.url.searchParams.get('category');

Use route parameters when the value defines identity (like ID or slug).
Use query parameters for filtering or optional values.

Navigation in Qwik

To navigate between routes without full page reload, Qwik provides the Link component.

import { Link } from '@builder.io/qwik-city';

<Link href="/about">Go to About</Link>

Using Link ensures:

• Client-side navigation
• Performance optimization
• Smooth transitions

Server-Side Rendering and Routing

Qwik routing works seamlessly with server-side rendering. When a user requests a route:

1. The server renders the HTML
2. The correct route component is executed
3. State is serialized
4. The page is sent to the browser

This approach improves SEO and allows content to be indexed efficiently.

Best Practices for Qwik Routing

• Keep route structure organized
• Use descriptive folder names
• Avoid deeply nested routes unless necessary
• Use layouts for shared UI
• Prefer route params over query strings for primary identifiers
• Keep components small and reusable

Common Mistakes to Avoid

1. Placing routes outside src/routes
2. Forgetting index.tsx for route entry
3. Misusing dynamic segments
4. Not using Link for internal navigation
5. Mixing client-only logic inside server loaders

Understanding these early can save debugging time.

Summary

In this part of the Qwik tutorial series, we explored:

• What Qwik City is
• How file-based routing works
• Creating static routes
• Building dynamic routes
• Working with layouts
• Accessing route parameters and query strings
• Client-side navigation using Link
• Routing with SSR support

Routing in Qwik is structured, predictable, and designed to integrate naturally with resumability and server-side rendering.