Oppiskele Hakutoiminnallisuuden Kehittäminen | Edistyneet Next.js-Ominaisuudet ja Optimoinnit

Teoria

Ennen hakutoiminnallisuuden toteuttamista on tärkeää ymmärtää nämä client hookit.

useSearchParams;
- Mahdollistaa nykyisten URL-parametrien lukemisen;
- Esimerkki: URL-osoitteessa /dashboard/invoices?page=1&query=pending se palauttaa {page: '1', query: 'pending'}.
usePathname;
- Lukee nykyisen URL-osoitteen polun;
- Esimerkki: Reitillä domain/dashboard/invoices usePathname palauttaa "/dashboard/invoices".
useRouter.
- Mahdollistaa reittien vaihtamisen client-komponenteissa useilla eri tavoilla.

Toteutusvaiheiden yleiskatsaus:

Käyttäjän syötteen tallentaminen;
URL-osoitteen päivittäminen hakuparametreilla;
URL-osoitteen ja syötekentän synkronointi;
Taulukon päivittäminen hakukyselyn mukaisesti.

Takaisin projektiin

1. Käyttäjän syötteen tallentaminen

Avaa Search-komponentti (app/ui/search.tsx);
Huomioi 'use client' -käytön, joka mahdollistaa tapahtumankuuntelijat ja hookit;
Hyödynnä handleSearch-funktiota, joka käynnistyy jokaisella syötteen muutoksella.

Toteutuksen jälkeen avaa selaimen kehittäjäkonsoli. Kaikki syöttökenttään kirjoitettu teksti näkyy nyt konsolissa.

2. Päivitä URL hakuehdoilla

Tuo useSearchParams-hook osoitteesta 'next/navigation' ja aseta se muuttujaan;
Luo handleSearch-funktion sisällä uusi URLSearchParams-instanssi käyttäen aiemmin määriteltyä muuttujaa (searchParams). Tämä apuluokka tarjoaa menetelmiä URL-kyselyparametrien käsittelyyn;
Aseta parametrimerkkijono käyttäjän syötteen perusteella. Jos syöte on tyhjä, poista se;
Hyödynnä useRouter- ja usePathname-hookeja osoitteesta 'next/navigation' ja käytä replace-metodia useRouter()-hookista handleSearch-funktion sisällä.
- ${pathname} viittaa nykyiseen polkuun, esim. "/dashboard/invoices";
- Kun käyttäjä kirjoittaa hakukenttään, params.toString() muuntaa syötteen URL-yhteensopivaan muotoon;
- replace(${pathname}?${params.toString()}) päivittää URL-osoitteen käyttäjän hakutiedoilla (esim. /dashboard/invoices?query=qwerty).

URL päivittyy ilman sivun uudelleenlatausta Next.js:n asiakaspuolen navigoinnin ansiosta.

Toteutuksen jälkeen kaikki syötteeseen kirjoitettu teksti näkyy URL-osoitteessa.

3. Pidä URL ja syötekenttä synkronoituna

Jotta syötekenttä vastaa URL:ia ja täyttyy jaettaessa, käytä defaultValue-ominaisuutta lukemalla arvo searchParams-muuttujasta.

4. Päivitä taulukko hakukyselyn mukaisesti

Lopuksi päivitetään Table-komponentti heijastamaan hakukyselyä. Sivukomponentit hyväksyvät propin nimeltä searchParams. Välitä nykyiset URL-parametrit <Table>-komponentille.

Muista poistaa kommentointi Table-komponentilta.

Hienoa! Olet onnistuneesti lisännyt hakutoiminnon sovellukseesi. Kokeile – toimiiko se? 😊

Seuraavassa luvussa perehdytään sivutukseen, sillä tällä hetkellä sivulla näkyy vain 6 laskua.

Käytännössä

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 6. Luku 2

Kysy tekoälyä

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Suggested prompts:

Can you explain how the useSearchParams hook works in more detail?

How does the Table component use the query and currentPage props to filter data?

What should I do if the search input and URL are not staying in sync?

Pyyhkäise näyttääksesi valikon