# Feature Routing

> Guide for implementing client-side routing in Fusebase Apps features. Use when: 1. Adding routing (React Router) to a feature, 2. Fixing broken routes or 404s after deployment, 3. Configuring the router.

- Skill: `antongulin/feature-routing` (Agent Skill)
- Install (CLI): `npx skillmds@latest add antongulin/feature-routing`
- Raw SKILL.md: https://api.skillmd.com/api/skills/antongulin/feature-routing/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: antongulin (https://skillmd.com/u/antongulin)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/antongulin/feature-routing

---


# Feature Routing

Fusebase Apps features are each served from their own **subdomain root**:

```
https://{feature-subdomain}.{FUSEBASE_APP_HOST}/
```

Read `FUSEBASE_APP_HOST` from the project `.env` when constructing feature URLs. The feature always owns the full path space from `/`.

> **IMPORTANT: Always use path-based routing (`BrowserRouter`). Hash-based routing (`HashRouter`) is forbidden** — hash fragments are stripped during redirects (e.g. OAuth, SSO), causing users to lose their navigation state.

## Path-Based Routing

Routes work as normal from root:

```
https://my-feature.{FUSEBASE_APP_HOST}/settings
https://my-feature.{FUSEBASE_APP_HOST}/users/42
```

### Configure the router

```tsx
import { BrowserRouter, Routes, Route } from 'react-router-dom'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </BrowserRouter>
  )
}
```

## Common Pitfalls

1. **Using `HashRouter`** — Forbidden. Hash fragments are dropped on redirects, breaking navigation after OAuth or SSO flows.
2. **Hardcoded absolute paths** — Use React Router's `<Link>` component, not raw `<a href="/settings">`.
3. **Defining routes under `/api`** — The `/api` prefix is reserved for the backend when a feature has one. Never create SPA routes under `/api/*`. See skill **feature-backend**.