feat: add onNavigate callback to Breadcrumb for SPA routing
All checks were successful
Build & Publish / publish (push) Successful in 2m1s

Breadcrumb used plain <a href> which bypasses React Router's basename,
breaking navigation in multi-tenant setups with a base path prefix.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-15 09:45:38 +02:00
parent a62ff5b064
commit ac3b69f864
2 changed files with 10 additions and 3 deletions

View File

@@ -8,9 +8,10 @@ interface BreadcrumbItem {
interface BreadcrumbProps { interface BreadcrumbProps {
items: BreadcrumbItem[] items: BreadcrumbItem[]
className?: string className?: string
onNavigate?: (href: string) => void
} }
export function Breadcrumb({ items, className }: BreadcrumbProps) { export function Breadcrumb({ items, className, onNavigate }: BreadcrumbProps) {
return ( return (
<nav aria-label="Breadcrumb" className={className}> <nav aria-label="Breadcrumb" className={className}>
<ol className={styles.list}> <ol className={styles.list}>
@@ -22,7 +23,11 @@ export function Breadcrumb({ items, className }: BreadcrumbProps) {
{isLast ? ( {isLast ? (
<span className={styles.active}>{item.label}</span> <span className={styles.active}>{item.label}</span>
) : item.href ? ( ) : item.href ? (
<a href={item.href} className={styles.link}> <a
href={item.href}
className={styles.link}
onClick={onNavigate ? (e) => { e.preventDefault(); onNavigate(item.href!) } : undefined}
>
{item.label} {item.label}
</a> </a>
) : ( ) : (

View File

@@ -14,6 +14,7 @@ interface TopBarProps {
user?: { name: string } user?: { name: string }
userMenuItems?: import('../../composites/Dropdown/Dropdown').DropdownItem[] userMenuItems?: import('../../composites/Dropdown/Dropdown').DropdownItem[]
onLogout?: () => void onLogout?: () => void
onNavigate?: (href: string) => void
className?: string className?: string
children?: ReactNode children?: ReactNode
} }
@@ -24,6 +25,7 @@ export function TopBar({
user, user,
userMenuItems, userMenuItems,
onLogout, onLogout,
onNavigate,
className, className,
children, children,
}: TopBarProps) { }: TopBarProps) {
@@ -33,7 +35,7 @@ export function TopBar({
return ( return (
<header className={`${styles.topbar} ${className ?? ''}`}> <header className={`${styles.topbar} ${className ?? ''}`}>
{/* Left: Breadcrumb */} {/* Left: Breadcrumb */}
<Breadcrumb items={breadcrumbOverride ?? breadcrumb} className={styles.breadcrumb} /> <Breadcrumb items={breadcrumbOverride ?? breadcrumb} className={styles.breadcrumb} onNavigate={onNavigate} />
{/* Center: consumer-provided controls */} {/* Center: consumer-provided controls */}
{children} {children}