Routing, Links & Redirects¶

In Inertia applications, all routing is defined on the server using standard Litestar @get, @post, @put, @patch, and @delete decorators. You do not need react-router or vue-router.

How Litestar Routing Compares to Laravel + Ziggy¶

Client-Side Navigation with <Link> and route¶

Use Inertia's <Link> component for internal navigation so clicks are intercepted as lightweight XHR/Fetch requests instead of full browser reloads. Pair <Link> with the generated route() function from @/generated/routes for compile-time URL safety:

import { Link } from "@inertiajs/react";
import { route } from "@/generated/routes";

export function Nav({ userId }: { userId: number }) {
  return (
    <nav>
      <Link href={route("dashboard")}>Dashboard</Link>
      <Link href={route("users.show", { user_id: userId })}>My Profile</Link>
      <Link href={route("logout")} method="post" as="button">
        Sign Out
      </Link>
    </nav>
  );
}

<script setup lang="ts">
import { Link } from "@inertiajs/vue3";
import { route } from "@/generated/routes";

defineProps<{ userId: number }>();
</script>

<template>
  <nav>
    <Link :href="route('dashboard')">Dashboard</Link>
    <Link :href="route('users.show', { user_id: userId })">My Profile</Link>
    <Link :href="route('logout')" method="post" as="button">Sign Out</Link>
  </nav>
</template>

<script lang="ts">
  import { router } from "@inertiajs/svelte";
  import { route } from "@/generated/routes";

  let { userId }: { userId: number } = $props();
</script>

<nav>
  <a href={route("dashboard")} onclick={(e) => { e.preventDefault(); router.visit(route("dashboard")); }}>
    Dashboard
  </a>
  <button type="button" onclick={() => router.post(route("logout"))}>
    Sign Out
  </button>
</nav>

Global Route Helper¶

If you want route() available globally without importing it in every file (similar to Laravel Ziggy), set TypeGenConfig(global_route=True) in Python and register window.route = route in your application entrypoint.

Redirect Primitives¶

Inertia expects specific HTTP status codes when redirecting after form submissions or navigating to external domains:

The POST-Redirect-GET Pattern¶

Following any mutation (POST, PUT, PATCH, DELETE), return an InertiaRedirect or InertiaBack so the browser follows up with a GET visit and updates the page props cleanly:

from typing import Any
from litestar import Request, post
from litestar_vite.inertia import InertiaBack, InertiaExternalRedirect, InertiaRedirect, flash


@post("/projects/{project_id:int}/archive", sync_to_thread=False)
def archive_project(request: Request[Any, Any, Any], project_id: int) -> InertiaRedirect:
    """Archive a project, flash a notification, and redirect to the index."""
    flash(request, f"Project #{project_id} archived.", category="success")
    return InertiaRedirect(request, redirect_to="/projects")


@post("/comments", sync_to_thread=False)
def post_comment(request: Request[Any, Any, Any]) -> InertiaBack:
    """Return to whichever page submitted the comment."""
    flash(request, "Comment added.", category="info")
    return InertiaBack(request)


@post("/billing/checkout", sync_to_thread=False)
def start_checkout(request: Request[Any, Any, Any]) -> InertiaExternalRedirect:
    """Redirect outside the SPA to an external payment gateway."""
    return InertiaExternalRedirect(request, redirect_to="https://checkout.stripe.com/pay/cs_test_123")