Skip to content

docs(link): add usage example with React Router #384

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

docs(link): add usage example with React Router #384

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
00db3cf
docs(link): add usage example with React Router
donchi-donald Sep 17, 2025
31952a5
docs(link): update usage example with react router
donchi-donald Sep 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions docs/30-components/link.mdx
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

_href(required) da müssen wir schauen - bitte probiere das Beispiel mit React aus und adaptiere es dann für reines HTML.

Copy link
Contributor Author

@donchi-donald donchi-donald Sep 19, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hi @deleonio ,

ich habe nochmal drüber nachgedacht. Da es bereits ein React-Sample-Projekt gibt, würde ich dort ein React-Router-Beispiel ergänzen (mit identischer Route in _href und navigate(...)). Hintergrund: onClick mit deaktiviert beim Primärklick die native _href-Navigation, während Rechtsklick/„In neuem Tab öffnen“ weiterhin dem _href folgt – daher müssen beide Pfade übereinstimmen.

In der Doku verlinken wir dann direkt auf dieses Sample und lassen auf der Seite selbst ein kurzes HTML-Only-Beispiel.

Wenn das für dich passt, erstelle ich im Haupt-Kolibri-Repo ein Ticket und aktualisiere anschließend diese PR später entsprechend. passt es?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Beim onClick event.defaultPrevent verwenden - oder?

Copy link
Contributor Author

@donchi-donald donchi-donald Sep 19, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ja exact, kann ich dafür ein Sample in react erweitern?

Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,11 @@ Der übergebene Location-String muss dabei exakt dem `href`-Attributs des Links

### Anwendungsfälle-->

## Verwendung mit React Router

Um den **React Router** mit der Link-Komponente zu nutzen, kann der `onClick`-Handler des Links überschrieben werden.
Dabei wird der `navigate`-Hook aus React Router im Handler aufgerufen. So bleibt die Navigation im SPA‑Kontext, ohne die Seite neu zu laden.

## Barrierefreiheit

### Tastatursteuerung
Expand All @@ -107,3 +112,4 @@ Der übergebene Location-String muss dabei exakt dem `href`-Attributs des Links
<Configurator component="link" sample="icons" />
<Configurator component="link" sample="image" />
<Configurator component="link" sample="target" />
<Configurator component="link" sample="react-router" />
Loading