Erstellung und Verwaltung Aktiver Links
In der Webentwicklung ist es üblich, aktive Links basierend auf der aktuellen Seite hervorzuheben.
In Next.js kann dies mit dem usePathname()-Hook umgesetzt werden. Dieser Hook prüft den aktuellen Pfad in der Anwendung und ermöglicht es, mithilfe der clsx-Bibliothek eine dynamische Hervorhebung der entsprechenden Seite zu realisieren.
Zurück zum Projekt
Um den usePathname()-Hook zu verwenden, nav-links.tsx in eine Client-Komponente umwandeln. Zunächst die Direktive "use client" am Anfang der Datei hinzufügen.
Nun können wir den usePathname-Hook verwenden und ihn einsetzen.
Abschließend die clsx-Bibliothek verwenden, um Styles bedingt anzuwenden. Die Bedingung so setzen, dass bei Übereinstimmung von pathname und link.href die Hintergrundfarbe auf bg-neutral-600 geändert wird.
In der Praxis
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
How does the clsx library work for conditional styling?
Can you explain how usePathname determines the active link?
What should I do if the active link highlighting doesn't work as expected?
Awesome!
Completion rate improved to 2.08Erstellung und Verwaltung Aktiver Links
Swipe um das Menü anzuzeigen
In der Webentwicklung ist es üblich, aktive Links basierend auf der aktuellen Seite hervorzuheben.
In Next.js kann dies mit dem usePathname()-Hook umgesetzt werden. Dieser Hook prüft den aktuellen Pfad in der Anwendung und ermöglicht es, mithilfe der clsx-Bibliothek eine dynamische Hervorhebung der entsprechenden Seite zu realisieren.
Zurück zum Projekt
Um den usePathname()-Hook zu verwenden, nav-links.tsx in eine Client-Komponente umwandeln. Zunächst die Direktive "use client" am Anfang der Datei hinzufügen.
Nun können wir den usePathname-Hook verwenden und ihn einsetzen.
Abschließend die clsx-Bibliothek verwenden, um Styles bedingt anzuwenden. Die Bedingung so setzen, dass bei Übereinstimmung von pathname und link.href die Hintergrundfarbe auf bg-neutral-600 geändert wird.
In der Praxis
Danke für Ihr Feedback!
