Qwik City - Routing

Routing is a way to map public URLs for a site to specific components declared in your application. Qwik City uses file-based routing. This means that the directory/file structure drives the public-facing URLs that the user will see for your application.

Basic routing

In the Qwik City routes directory, folders map to paths. For example, if the user sees https://example.com/some/path, the component exported at src/routes/some/path (either .mdx or .tsx) will be shown.

- src/
  - routes/
    - some/           
      - path.tsx       # https://example.com/some/path

Implementing a Component

To return HTML for a specific route you will need to implement a component. For .tsx files the component must be exported as default. Alternatively, you can use .mdx extension discussed later.

export default component$(() => {
  return (
    <H1>
      Hello World!
    </H1>
  );
});

_ prefix

Occasionally, there is a need to place files into the src/routes folder without them showing up on any route. In this case, use the _ prefix to let Qwik City know that the file is private and should not be exposed.

@qwik-city-plan

Qwik City stores route information in files on disk. This is great for developer ergonomics but not useful for creating bundles and chunks. Additionally, in some environments - such as edge functions - there is no file system that can be accessed. For this reason, it is necessary to serialize the route information into a single file. This is done through the @qwik-city-plan import.

import cityPlan from '@qwik-city-plan';

The @qwik-city-plan import is synthetic, meaning that it is created as part of the build step. It contains all of the information in the /src/routes folder in JavaScript format. The synthetic import is provided by the qwikCity() vite plugin available from @builder.io/qwik-city/vite.

Advanced routing

Qwik City also supports:

• index.tsx
• Route Parameters
• Pathless URLs
• Nested layouts
• Menus

These are discussed later.