spa-routes

Enforce React SPA route registration parity across desktop router config files.

1|Updated May 9, 2026

Search Tags:#react #code organization #spa routing #router configuration #desktop parity #features vs routes

Ready to run

npx skills add https://github.com/duwenji/generative-ai-oss-tutorials --skill spa-routes-duwenji

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: spa-routes
Source: https://github.com/duwenji/generative-ai-oss-tutorials/tree/main/sandbox/lobe-chat/.agents/skills/spa-routes
Command: npx skills add https://github.com/duwenji/generative-ai-oss-tutorials --skill spa-routes-duwenji

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents broken navigation and blank screens by enforcing a consistent, low-coupling split between route “roots” and domain “features,” especially when updating the desktop router in parallel.

Core Features & Use Cases

Roots vs Features separation: Keeps src/routes/ thin (layout/page segments only) and moves domain UI/logic into src/features/ by domain.
Desktop router parity enforcement: Ensures route tree changes are mirrored in both src/spa/router/desktopRouter.config.tsx and src/spa/router/desktopRouter.config.desktop.tsx to avoid missing registrations.
Safe route addition workflow: Guides how to create segment files under src/routes/ while implementing the actual UI and business logic in src/features/.

Quick Start

Add your new segment files under src/routes/, implement the UI and logic under the appropriate src/features/<Domain>/ module, and register the exact matching route tree in both desktop router config files.

Frequently Asked Questions about spa-routes

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

FAQPage Schema

Why do I get blank screens when adding new React SPA routes to the desktop router?▼

Blank screens happen when desktop route tree changes are missing in either desktopRouter.config.tsx or desktopRouter.config.desktop.tsx. Mirroring the exact route structure in both config files prevents missing registrations and UI drift.

How do I separate SPA routing roots from domain features in React?▼

Keep src/routes/ thin with layout and page segments only, then move domain UI and business logic into src/features/<Domain>/ modules. This low-coupling split prevents broken navigation and keeps SPA routing clean.

What is the best way to add a new route segment to a React SPA without causing UI drift?▼

Create segment files under src/routes/, implement the UI and logic in src/features/<Domain>/, and register the matching route tree in both desktopRouter.config.tsx and desktopRouter.config.desktop.tsx to maintain desktop router parity.

Does this SPA routing approach require parallel changes to desktop and mobile router configs?▼

Yes, desktop route tree changes must be mirrored in both desktopRouter.config.tsx and desktopRouter.config.desktop.tsx with consistent structure, nesting, and segment registration to avoid missing routes.

When should I refactor SPA routes into features versus keeping them in the routes directory?▼

Keep only layout and page segments in src/routes/. When a route contains domain UI or business logic, move that implementation into src/features/ by domain to enforce a strict separation and prevent UI drift.