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:

  • 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 307 Temporary Redirect status.

Read more about redirect status codes here.

Made with โค๏ธ by