skills.rest
afialapis
afialapisCOMMUNITY
Explore all skills by this author →
Website𝕏@_afialapis_GitHub

miolo-cli-router

Implement React Router v7 client and server routing for miolo applications.

Updated Feb 4, 2022
Search Tags:#routing#client-side#routing-patterns#react-router#web-architecture#nested-routes#miolo
One-click install
npx skills add https://github.com/afialapis/miolo --skill miolo-cli-router
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: miolo-cli-router
Source: https://github.com/afialapis/miolo/tree/main/skills/miolo-cli-router
Command: npx skills add https://github.com/afialapis/miolo --skill miolo-cli-router

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Client-side routing in miolo apps can be complex to implement consistently across authenticated and unauthenticated flows, with SSR considerations and layout nesting.

Core Features & Use Cases

  • Client and server routing entries using React Router v7, with BrowserRouter for client hydration and StaticRouter for SSR.
  • Patterned routing with a MainLayout and nested routes, plus IndexOnline and IndexOffline for authenticated and unauthenticated experiences.
  • Clear guidance for extending routes by adding new pages under src/cli/pages and wiring them into IndexOnline.jsx.

Quick Start

Review and implement the miolo routing pattern by configuring the two entry points and nested routes as described, then add feature pages under src/cli/pages and wire them into IndexOnline.jsx.

Frequently Asked Questions about miolo-cli-router

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

FAQPage Schema
How do I implement client-side routing with react-router v7 for SSR data loading?▼

To implement client-side routing for SSR data loading, configure BrowserRouter for client hydration and StaticRouter for server-side rendering to ensure structured navigation and data loading.

What is the best way to structure nested routes for authenticated and unauthenticated web flows?▼

The best way to structure nested routes for these flows is using a MainLayout with IndexOnline for authenticated experiences and IndexOffline for unauthenticated experiences, separating access levels cleanly.

How do I add a new page to a miolo app's routing structure?▼

To add a new page, create the component under the src/cli/pages directory and wire it into the IndexOnline.jsx file, safely extending the existing nested route configuration without breaking the layout.

Does react-router v7 support both client hydration and static server-side rendering entry points?▼

Yes, react-router v7 supports both entry points by utilizing BrowserRouter to handle client hydration and StaticRouter to manage server-side rendering, allowing a unified routing pattern across environments.

Why does my nested layout routing break when adding dynamic routes in a scalable web architecture?▼

Nested layout routing with dynamic routes breaks when route wiring is incomplete or misplaced. You must properly nest dynamic routes within the MainLayout and configure entry points correctly to support scalable page structures.

Related Skills

Explore More Software Engineering Skills→
vallafedericovallafederico

solidstart-entrypoints

Configure SolidStart entry points and build settings for server and client.

Community
Intermediate
ROU-TechnologyROU-Technology

angular-routing

Implement Angular v20+ routing with lazy loading, guards, resolvers, and signals.

Official
Intermediate
googlegoogle
455

uiblocks

Design interactive 3D user interfaces for XR Blocks with Three.js and uikit.

Official
Advanced
Sienci-LabsSienci-Labs
363

integration-react-react-router-7-declarative

Integrate PostHog analytics into React Router v7 declarative apps.

Official
Intermediate