From 30245915c2954cd2a828e5828e6324394ab9b6cf Mon Sep 17 00:00:00 2001
From: k-j-kim <17989954+k-j-kim@users.noreply.github.com>
Date: Tue, 31 Mar 2026 11:48:10 -0700
Subject: [PATCH] fix: derive router basename from base href at runtime
@W-21338965@ (#154)
fix: derive router basename from at runtime
Add guidance to building-ui-bundle-frontend skill to always derive
the client-side router basename from the document's tag
instead of hardcoding it.
---
skills/building-ui-bundle-frontend/SKILL.md | 9 +++++++++
1 file changed, 9 insertions(+)
diff --git a/skills/building-ui-bundle-frontend/SKILL.md b/skills/building-ui-bundle-frontend/SKILL.md
index b83252d..47a07fa 100644
--- a/skills/building-ui-bundle-frontend/SKILL.md
+++ b/skills/building-ui-bundle-frontend/SKILL.md
@@ -43,6 +43,15 @@ Before finishing, confirm: Did I update `appLayout.tsx` with real nav items and
Use a single router package. With `createBrowserRouter` / `RouterProvider`, all imports must come from `react-router` (not `react-router-dom`).
+If the app uses a client-side router (React Router, Remix Router, Vue Router, etc.), always derive basename / basepath / base from the document's `` tag at runtime. Never hardcode the basename:
+
+```js
+const basename = document.querySelector('base')
+ ? new URL(document.querySelector('base').href).pathname.replace(/\/$/, '')
+ : '/';
+const router = createBrowserRouter(routes, { basename });
+```
+
### Component Library and Styling
- **shadcn/ui** for components: `import { Button } from '@/components/ui/button';`