Redirects

Sometimes you want to redirect a user from the current page to another page.

Let's say a user tries to go to a dashboard page but has not logged in yet. We want them to be redirected to a login page so they can be authenticated.

// File: src/routes/dashboard.js
import { component$ } from '@builder.io/qwik';
import { checkAuthorization } from '../auth'; // Your authorization code
import type { DashboardData } from '../types'; // Your types

export const onGet: RequestHandler<DashboardData> = async ({ request, response }) => {
  const isAuthorized = checkAuthorization(request.headers.get('cookie'));

  if (!isAuthorized) {
    // User is not authorized!
    // throw the redirect response to
    // relocate the user to the log-in page
    throw response.redirect('/login');
  } else {
    // ...
  }
};

The response.redirect() function takes a URL and optionally a status code as the second argument.

throw response.redirect('/login', 301); // Moved Permanently

Common redirect status codes:

• 302: Found. This response code means that the URI of requested resource has been changed temporarily. Further changes in the URI might be made in the future. Therefore, this same URI should be used by the client in future requests.
• 307: Temporary Redirect. The server sends this response to direct the client to get the requested resource at another URI with the same method that was used in the prior request. This has the same semantics as the 302 Found HTTP response code, with the exception that the user agent must not change the HTTP method used: if a POST was used in the first request, a POST must be used in the second request.
• 308: Permanent Redirect. This means that the resource is now permanently located at another URI, specified by the Location HTTP Response header. This has the same semantics as the 301 Moved Permanently HTTP response code, with the exception that the user agent must not change the HTTP method used: if a POST was used in the first request, a POST must be used in the second request.

If you do not provide a status code, Qwik City will default to a 302 Found status.

Read more about redirect status codes here.