🚀 Feature: <KolBreadcrumbs /> kompatibel mit React-Navigation machen

[yinken]

Goals

1. Unterstützung für Navigation mithilfe von react-router (oder anderen Routing Frameworks)
2. Besseres User-Experience bei der Navigation
3. Weniger unnötige requests

Non-Goals

No response

Background

• <KolBreadcrumbs /> verwendet native html Tags für das rendern von Links
• Routing Frameworks verwenden ihre eigenen <Link /> Komponenten oder Methoden wie navigate("/home") für die Navigation
• Im besten Fall können Klicks auf "normale" Tags vom Routing Framework abgefangen werden, so dass das "normale" Navigationsverhalten vom Router übernommen wird
• Dies ist aber nicht garantiert

Warum ist dies wichtig?
Das "normale" Verhalten beim Klick auf einen -Tag führt im schlimmsten Fall dazu, dass...

• die Seite komplett neu geladen wird, auch wenn dies nicht erforderlich ist (React entscheidet ja normalerweise welche Komponenten aktualisiert werden müssen
• unnötige Requests and den Server ausgeführt werden (Dateien die eigentlich schon vorhanden sind, werden erneut geladen)
• die Seite kurz "aufblitzt", da das DOM komplett neu gerendert werden muss (bad user-experience)

Proposal

• Idee 1: "component"-property, die den Standard Tag ersetzt (z.B. durch die <Link /> Komponente von react-router
• Idee 2: "render"-property (ähnlich wie 1, doch vielleicht mit mehr Kontrolle(?)
• Idee 3: "onClick"-property für das triggern von side-effects beim Klicken auf den Breadcrumb (würde Standard-Klickverhalten unterbinden

[deleonio]

Hallo @yinken, das sollte, wie folgt schon gehen:

import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { KolBreadcrumb } from '@public-ui/react';

export const IconBreadcrumb: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();

  const createNavigateHandler = (path: string) => ({
    onClick: (event: Event) => {
      event.preventDefault();
      navigate(path);
    },
  });

  const breadcrumbLinks = [
    {
      _label: 'Homepage',
      _icons: 'codicon codicon-home',
      _hideLabel: true, // Nur Icon anzeigen
      _href: '/',
      _on: createNavigateHandler('/'),
    },
    {
      _label: 'Produkte',
      _href: '/products',
      _on: createNavigateHandler('/products'),
    },
    {
      _label: 'Details',
      // Letzter Link ohne onClick Handler (current page)
      _href: location.pathname,
    },
  ];

  return (
    <KolBreadcrumb
      _label="Breadcrumb mit Icons"
      _links={breadcrumbLinks}
    />
  );
};

Wichtige Punkte

1. Dual-Funktionalität: Verwenden Sie sowohl _href als auch _on.onClick um sowohl normale Klicks als auch Rechtsklick/Neue-Tab-Funktionalität zu unterstützen.
2. preventDefault(): Verwenden Sie event.preventDefault() im onClick-Handler, um die Standard-Navigation zu verhindern und React Router zu verwenden.
3. Letzter Link: Der letzte Breadcrumb-Eintrag (aktuelle Seite) sollte keinen onClick-Handler haben.

[yinken]

Funktioniert. Super, danke. Ich hatte den "-on" Parameter übersehen.