skills.rest
duwenji
duwenjiCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/duwenji/generative-ai-oss-tutorials --skill spa-routes-duwenji
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
andershi666andershi666
1

spa-routes

Align SPA router configs across desktop and mobile files during route edits.

Community
Intermediate
zmh13928433602-syszmh13928433602-sys

spa-routes

Maintain SPA route parity between desktop and mobile router configs.

Community
Intermediate
gileckgileck

pages-and-routing-guidelines

Guide adding SPA client routes with folder structure and registration.

Community
Intermediate
bpteambpteam

react-web

Scaffold TypeScript React SPAs with Vite, React Router, and Apollo Client.

Community
Intermediate