skills.rest
ryan-haver
ryan-haverCOMMUNITY
Explore all skills by this author →
GitHub

app-routing

Configure path-based React Router routing for FuseBase Apps subdomains.

5|2|Updated Feb 9, 2026
Search Tags:#routing#spa#react-router#subdomain#client-side routing#fusebase#browserrouter
One-click install
npx skills add https://github.com/ryan-haver/fusebase-mcp --skill app-routing-ryan-haver
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: app-routing
Source: https://github.com/ryan-haver/fusebase-mcp/tree/main/apps/client-portal-dashboard/.claude/skills/app-routing
Command: npx skills add https://github.com/ryan-haver/fusebase-mcp --skill app-routing-ryan-haver

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-router-dom.

What problem does it solve? FuseBase Apps are each served from their own subdomain root, and developers often break navigation by using hash-based routing, hardcoded links, or routes that collide with the reserved /api backend prefix. This Skill provides the correct routing setup so routes work after deployment, OAuth, and SSO redirects. ## Core Features & Use Cases - Path-Based Router Setup: Shows how to configure React Router's BrowserRouter with Routes and Route components for apps served from a subdomain root. - Deployment-Safe Navigation: Explains why HashRouter is forbidden since hash fragments are stripped during OAuth and SSO redirects, losing navigation state. - Pitfall Prevention: Covers reserved /api backend paths, using Link instead of raw anchor tags, and reading FUSEBASE_APP_HOST from .env for app URLs. - Use Case: After deploying a FuseBase app, users hit 404s on /settings or lose state after SSO login. Apply this Skill to switch to BrowserRouter and fix route definitions. ## Quick Start Set up React Router in my FuseBase app using path-based routing with routes for home and settings pages.

Frequently Asked Questions about app-routing

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

FAQPage Schema
How do I set up React Router in a FuseBase app?▼

Wrap your app in BrowserRouter and define Routes with Route components mapping paths like / and /settings to page elements. FuseBase Apps own the full path space from their subdomain root, so path-based routes work normally.

Why is HashRouter forbidden in FuseBase Apps?▼

HashRouter is forbidden because hash fragments are stripped during redirects such as OAuth and SSO flows, causing users to lose their navigation state. Always use BrowserRouter for path-based routing instead.

Why do my routes return 404 after deploying a FuseBase app?▼

Broken routes after deployment usually come from hash-based routing, hardcoded absolute links, or routes defined under the reserved /api prefix. Switch to BrowserRouter, use React Router's Link component, and keep SPA routes outside /api.

Can I define React routes under /api in a FuseBase app?▼

No, the /api prefix is reserved for the backend when an app has one. Never create SPA routes under /api/*; see the app-backend skill for backend routing concerns.

How do I construct app URLs in a FuseBase app?▼

Read FUSEBASE_APP_HOST from the project .env file when constructing app URLs. Each app is served from its own subdomain root like https://{app-subdomain}.thefusebase.app/ and owns the full path space.

Related Skills

Explore More Software Engineering Skills→
richardadonnellrichardadonnell
45

sentry-react-setup

Install and configure the Sentry SDK for React applications.

Community
Intermediate
MaxcogarMaxcogar

api-endpoint-mapper

Map API endpoints across codebases to reveal backend definitions and frontend calls.

Community
Advanced
fusebase-devfusebase-dev
6

app-routing

Configure React Router BrowserRouter for Fusebase Apps to fix broken navigation.

Official
Intermediate
TheBushidoCollectiveTheBushidoCollective
187

nextjs-app-router

Scaffold Next.js 13+ App Router projects with layouts, dynamic routes, and streaming.

Official
Intermediate