# routing-guide

> Client-side routing patterns, lazy loading, and navigation structure. Keywords: routing, navigation, react router, lazy loading, nested routes.

- Author: willyu1007
- Repository: willyu1007/AI_First_Template
- Version: 20251224182030
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-07
- Source: https://github.com/willyu1007/AI_First_Template
- Web: https://mule.run/skillshub/@@willyu1007/AI_First_Template~routing-guide:20251224182030

---

---
name: routing-guide
description: "Client-side routing patterns, lazy loading, and navigation structure. Keywords: routing, navigation, react router, lazy loading, nested routes."
---

# Routing Guide

This skill provides routing patterns for frontend applications.

---

## 1. Principles

- Keep routing structure predictable and discoverable.
- Lazy-load route-level components when they are heavy.
- Keep route params validated and typed where possible.

---

## 2. Nested routing (common pattern)

- Prefer nested routes for step-by-step flows and detail pages.
- Keep shared layout components at a parent route level to avoid remount churn.

---

## 3. Links and navigation

- Prefer declarative navigation (`<Link>` components) over imperative navigation when possible.
- Ensure active states and breadcrumbs are consistent (if used).