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.tsxBecomes:
https://yourdomain.com/contactThis 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.tsxRoutes 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.tsxIf a user visits:
/blog/hello-worldThe 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.tsxExample 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.slugQuery Strings
Example URL:
/blog?category=techAccessed 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:
- The server renders the HTML
- The correct route component is executed
- State is serialized
- 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
- Placing routes outside
src/routes - Forgetting
index.tsxfor route entry - Misusing dynamic segments
- Not using
Linkfor internal navigation - 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.
