Aktiivisten Linkkien Luominen ja Hallinta
Verkkokehityksessä on yleistä korostaa aktiiviset linkit nykyisen sivun perusteella.
Next.js:ssä tämä onnistuu käyttämällä usePathname()-hookia. Tämä hook tarkistaa sovelluksen nykyisen polun, jolloin voimme toteuttaa dynaamisen korostuksen vastaavalle sivulle clsx-kirjaston avulla.
Takaisin projektiin
Hyödynnäksesi usePathname()-hookia, muuta nav-links.tsx Client-komponentiksi. Aloita lisäämällä tiedoston alkuun "use client" -direktiivi.
Nyt voimme käyttää usePathname-hookia ja hyödyntää sitä.
Lopuksi hyödynnetään clsx-kirjastoa tyylien ehdolliseen soveltamiseen. Aseta ehto siten, että jos pathname on yhtä kuin link.href, taustaväri muutetaan arvoksi bg-neutral-600.
Käytännössä
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
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.08Aktiivisten Linkkien Luominen ja Hallinta
Pyyhkäise näyttääksesi valikon
Verkkokehityksessä on yleistä korostaa aktiiviset linkit nykyisen sivun perusteella.
Next.js:ssä tämä onnistuu käyttämällä usePathname()-hookia. Tämä hook tarkistaa sovelluksen nykyisen polun, jolloin voimme toteuttaa dynaamisen korostuksen vastaavalle sivulle clsx-kirjaston avulla.
Takaisin projektiin
Hyödynnäksesi usePathname()-hookia, muuta nav-links.tsx Client-komponentiksi. Aloita lisäämällä tiedoston alkuun "use client" -direktiivi.
Nyt voimme käyttää usePathname-hookia ja hyödyntää sitä.
Lopuksi hyödynnetään clsx-kirjastoa tyylien ehdolliseen soveltamiseen. Aseta ehto siten, että jos pathname on yhtä kuin link.href, taustaväri muutetaan arvoksi bg-neutral-600.
Käytännössä
Kiitos palautteestasi!
