fix: derive router basename from <base href> at runtime

Add guidance to building-ui-bundle-frontend skill to always derive
the client-side router basename from the document's <base href> tag
instead of hardcoding it.
This commit is contained in:
k-j-kim 2026-03-31 10:56:50 -07:00
parent edbd8bfd70
commit 15988c20f0
No known key found for this signature in database
GPG Key ID: 40FA25A7DE938B04

View File

@ -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 `<base href>` 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';`