leptos-routing

Configure Leptos router patterns for typed paths, nested routes, and Axum mounting.

Updated May 26, 2026
One-click install
npx skills add https://github.com/adelabdelgawad/rust-fullstack-agents --skill leptos-routing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: leptos-routing
Source: https://github.com/adelabdelgawad/rust-fullstack-agents/tree/main/plugins/rusty/skills/leptos-routing
Command: npx skills add https://github.com/adelabdelgawad/rust-fullstack-agents --skill leptos-routing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Leptos routing for Rust apps can be verbose and error-prone when wiring typed paths, nested layouts, and Axum server mounting. This Skill provides a clear pattern-driven approach to configure a router with typed paths, nested routes via Outlet, and server mounting with leptos_routes_with_context.

Core Features & Use Cases

  • Typed path routing using the path! macro for type-safe routes.
  • Nested routes with Outlet to compose multi-level layouts.
  • Axum server mounting through leptos_routes_with_context to share context server-side.
  • Params and query handling with use_params and use_query_map for dynamic routes.
  • Programmatic navigation and islands-based links using use_navigate and <A> components.

Quick Start

Create a Router with path! and use Outlet, then mount it on Axum with leptos_routes_with_context to enable SSR routing.

Frequently Asked Questions about leptos-routing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up typed routing in Leptos with Axum server mounting?▼

You configure typed Leptos routing by defining paths with the path! macro, composing nested layouts with Outlet, and mounting the router onto Axum using leptos_routes_with_context to enable SSR routing with shared server context.

How do I create nested routes and layouts in a Leptos SSR application?▼

You create nested routes in Leptos by defining child routes within parent routes and using the Outlet component to render child elements, allowing multi-level layout composition in server-side rendered applications.

How do I handle dynamic params and query strings in Leptos routes?▼

Dynamic params and query strings in Leptos routing are handled using the use_params and use_query_map hooks, which extract typed path parameters and query string data from the current route context.

Does Leptos router support programmatic navigation and active links?▼

Leptos router supports programmatic navigation through the use_navigate hook for routing logic and the <A> component for islands-based links that automatically manage active states.

What is the best way to share server-side context when mounting Leptos routes on Axum?▼

The best way to share context is using the leptos_routes_with_context function, which integrates the Leptos router with Axum while injecting shared server-side context directly into the SSR rendering pipeline.

Why use the path! macro for Leptos routing instead of string-based paths?▼

Using the path! macro for Leptos routing enforces type-safe route definitions at compile time, preventing runtime errors from mismatched string paths and ensuring typed path parameters are correctly handled.