react-router-patterns

Community

Define robust React Router patterns for apps.

AuthorPremModhaOfficial
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This guide provides standardized React Router v7 patterns to streamline router configuration for Motadata's frontend, enabling consistent navigation structures, layouts, and guards across projects.

Core Features & Use Cases

  • Templates for createBrowserRouter setup, including nested routes and layout wrappers.
  • Lazy loading and code-splitting patterns using React.lazy and Suspense.
  • Guard patterns (AuthGuard, GuestGuard) for route protection and user flow control.
  • Breadcrumbs, 404 handling, and navigation utilities to improve user experience.
  • Use cases: applying patterns when generating new pages, features, or application sections to maintain consistency.

Quick Start

Load the router pattern templates and apply them to your app's router.tsx to start composing routes.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: react-router-patterns
Download link: https://github.com/PremModhaOfficial/motadata-ai-pipeline/archive/main.zip#react-router-patterns

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.