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.