Skip to main content

Navigation & Redirection

Alapa provides a robust and intuitive navigation API to manage routing and redirection across your project. It supports redirecting users, navigating to named routes, and attaching flash messages such as success, error, or info notifications seamlessly.

res.navigate.redirect​

Use this method to redirect a user to another URL. It accepts a single parameter β€” the target URL β€” which can be either absolute or relative.

src/app/account/router.ts
import { Router, Request, Response } from "alapa";
const router = new Router();

router.get("/", async (req: Request, res: Response) => {
return res.navigate.redirect("/home");
});

res.navigate.back​

Redirects the user to the previous page (the HTTP referer). This is useful after actions like failed login or form validation errors.

src/app/account/router.ts
import { Router, Request, Response } from "alapa";
const router = new Router();

router.get("/", async (req: Request, res: Response) => {
return res.navigate.back();
});

You can also include a flash message when navigating back:

src/app/account/router.ts
import { Router, Request, Response } from "alapa";
const router = new Router();

router.get("/", async (req: Request, res: Response) => {
return res.navigate.back("error", "Authentication failed");
});

res.navigate.route​

Use this method to navigate to a named route in your Alapa project. This is especially useful when working with route name definitions instead of hardcoded paths.

src/app/account/router.ts
import { Router, Request, Response } from "alapa";
const router = new Router();

router.get("/", async (req: Request, res: Response) => {
return res.navigate.route("dashboard");
});

You can also pass parameters required by the route:

src/app/account/router.ts
import { Router, Request, Response } from "alapa";
const router = new Router();

router.get("/", async (req: Request, res: Response) => {
const data = req.only("post");
return res.navigate.route("posts", data.post);
});

res.navigate.with​

Use .with() to attach a flash message to any navigation call. It accepts two arguments:

  • type: A string (success, error, info, or warn)
  • message: A string or array of messages to display
src/app/account/router.ts
import { Router, Request, Response } from "alapa";
const router = new Router();

router.get("/", async (req: Request, res: Response) => {
const data = req.only("post");
return res.navigate
.route("posts", data.post)
.with("success", "Redirected to post successfully");
});

res.navigate.withSuccess​

A shortcut to .with("success", message). Accepts a string or array of success messages.

src/app/account/router.ts
import { Router, Request, Response } from "alapa";
const router = new Router();

router.get("/", async (req: Request, res: Response) => {
return res.navigate.back().withSuccess("Login successful");
});

res.navigate.withErrors​

A shortcut for chaining error messages. Accepts a string or an array of messages.

src/app/account/router.ts
import { Router, Request, Response } from "alapa";
const router = new Router();

router.get("/", async (req: Request, res: Response) => {
return res.navigate.back().withErrors("Authentication failed");
});

res.navigate.withInfo​

Used to display informational messages. Accepts a string or array of messages.

src/app/account/router.ts
import { Router, Request, Response } from "alapa";
const router = new Router();

router.get("/", async (req: Request, res: Response) => {
return res.navigate
.route("dashboard")
.withInfo("New feature available. Would you like to try it?");
});

res.navigate.withWarn​

Used to display warning messages. Accepts a string or array of warnings.

src/app/account/router.ts
import { Router, Request, Response } from "alapa";
const router = new Router();

router.get("/", async (req: Request, res: Response) => {
return res.navigate
.route("dashboard")
.withWarn("2FA is not enabled on your account");
});

Chaining Navigation Methods​

All navigation methods are chainable. The order of chained methods doesn’t matter β€” Alapa handles it correctly behind the scenes.

src/app/account/router.ts
import { Router, Request, Response } from "alapa";
const router = new Router();

router.get("/", async (req: Request, res: Response) => {
return res.navigate
.withSuccess("Welcome to your dashboard")
.withInfo("You've received a free credit")
.route("dashboard")
.withWarn("Your email is not verified. Please verify it now.");
});

This powerful navigation API allows you to build expressive, user-friendly flows while keeping your code clean and readable.