mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-07-30 03:09:50 +08:00
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:
parent
edbd8bfd70
commit
15988c20f0
@ -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';`
|
||||
|
||||
Loading…
Reference in New Issue
Block a user