Navigationsoptimierung
Jetzt, da wir alle erforderlichen Seiten haben, lassen Sie uns erkunden, wie Benutzer sich zwischen ihnen bewegen können. Traditionell könnten wir das standardmäßige HTML-<a>
-Tag verwenden. Das Problem bei diesem Ansatz ist jedoch, dass er einen vollständigen Seitenneuladen auslöst, was die Benutzererfahrung beeinträchtigt.
Next.js schlägt vor, die <Link>
-Komponente zu verwenden, die es uns ermöglicht, die clientseitige Navigation zu erleichtern.
Zurück zum Projekt
Um die clientseitige Navigation zu implementieren, greifen Sie auf app/ui/dashboard/nav-links.tsx
zu, importieren Sie die Link
-Komponente aus next/link
und ersetzen Sie das <a>
-Tag durch <Link>
.
Nach dem Speichern Ihrer Änderungen testen Sie Ihr localhost, um eine nahtlose Seitennavigation ohne Seitenaktualisierung zu ermöglichen.
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
Awesome!
Completion rate improved to 2.08
Navigationsoptimierung
Swipe um das Menü anzuzeigen
Jetzt, da wir alle erforderlichen Seiten haben, lassen Sie uns erkunden, wie Benutzer sich zwischen ihnen bewegen können. Traditionell könnten wir das standardmäßige HTML-<a>
-Tag verwenden. Das Problem bei diesem Ansatz ist jedoch, dass er einen vollständigen Seitenneuladen auslöst, was die Benutzererfahrung beeinträchtigt.
Next.js schlägt vor, die <Link>
-Komponente zu verwenden, die es uns ermöglicht, die clientseitige Navigation zu erleichtern.
Zurück zum Projekt
Um die clientseitige Navigation zu implementieren, greifen Sie auf app/ui/dashboard/nav-links.tsx
zu, importieren Sie die Link
-Komponente aus next/link
und ersetzen Sie das <a>
-Tag durch <Link>
.
Nach dem Speichern Ihrer Änderungen testen Sie Ihr localhost, um eine nahtlose Seitennavigation ohne Seitenaktualisierung zu ermöglichen.
In der Praxis
Danke für Ihr Feedback!