Suchfunktion

Theorie

Bevor die Suchfunktionalität implementiert wird, ist es wichtig, diese Client-Hooks zu verstehen.

• useSearchParams;
  • Ermöglicht den Zugriff auf aktuelle URL-Parameter;
  • Beispiel: Für die URL /dashboard/invoices?page=1&query=pending liefert es {page: '1', query: 'pending'}.
• usePathname;
  • Liest den aktuellen Pfadnamen der URL;
  • Beispiel: Für die Route domain/dashboard/invoices gibt usePathname "/dashboard/invoices" zurück.
• useRouter.
  • Erleichtert die Navigation zwischen Routen innerhalb von Client-Komponenten und bietet mehrere Methoden.

Übersicht der Implementierungsschritte:

1. Benutzereingabe erfassen;
2. Die URL mit Suchparametern aktualisieren;
3. Die URL mit dem Eingabefeld synchronisieren;
4. Die Tabelle aktualisieren, um die Suchanfrage widerzuspiegeln.

Zurück zum Projekt

1. Benutzereingabe erfassen

1. Öffnen Sie die Search-Komponente (app/ui/search.tsx);
2. Beachten Sie die Verwendung von 'use client', was auf die Verfügbarkeit von Event-Listenern und Hooks hinweist;
3. Verwenden Sie die handleSearch-Funktion, die bei jeder Eingabeänderung ausgelöst wird.

Nach der Implementierung öffnen Sie die Entwicklerkonsole in Ihrem Browser. Sie sollten sehen, dass jeder in das Eingabefeld eingegebene Text in der Browserkonsole angezeigt wird.

2. Aktualisieren Sie die URL mit Suchparametern

1. Importieren Sie den useSearchParams Hook aus 'next/navigation' und weisen Sie ihn einer Variablen zu;
2. Erstellen Sie innerhalb der handleSearch Funktion eine neue Instanz von URLSearchParams mit der zuvor definierten Variablen (searchParams). Dieses Werkzeug bietet Methoden zur Manipulation von URL-Abfrageparametern;
3. Setzen Sie den Parameterstring basierend auf der Benutzereingabe. Wenn die Eingabe leer ist, löschen Sie sie;
4. Verwenden Sie die useRouter und usePathname Hooks aus 'next/navigation' und nutzen Sie die replace Methode von useRouter() innerhalb von handleSearch.
   • ${pathname} repräsentiert den aktuellen Pfad, z.B. "/dashboard/invoices";
   • Während der Benutzer in die Suchleiste tippt, konvertiert params.toString() die Eingabe in ein URL-freundliches Format;
   • replace(${pathname}?${params.toString()}) aktualisiert die URL mit den Suchdaten des Benutzers (z.B. /dashboard/invoices?query=qwerty).

Die URL wird ohne Seitenneuladen aktualisiert, dank der clientseitigen Navigation von Next.js.

Nach der Implementierung wird jeder in das Eingabefeld eingegebene Text in der URL angezeigt.

3. Halten Sie die URL mit dem Eingabefeld synchron

Um sicherzustellen, dass das Eingabefeld mit der URL übereinstimmt und beim Teilen ausgefüllt wird, verwenden Sie defaultValue, indem Sie von searchParams lesen.

4. Aktualisieren Sie die Tabelle, um die Suchanfrage widerzuspiegeln

Schließlich aktualisieren wir die Table-Komponente, um die Suchanfrage widerzuspiegeln. Seitenkomponenten akzeptieren eine Prop namens searchParams. Übergeben Sie die aktuellen URL-Parameter an die <Table>-Komponente.

Vergessen Sie nicht, die Table-Komponente zu entkommentieren.

Super! Du hast erfolgreich die Suchfunktionalität zu deiner App hinzugefügt. Probier es aus – funktioniert es? 😊

Im nächsten Kapitel werden wir uns mit der Paginierung beschäftigen, da derzeit nur 6 Rechnungen auf der Seite sichtbar sind.

In der Praxis