Skapa och Hantera Aktiva Länkar
Inom webbutveckling är det vanligt att markera aktiva länkar baserat på aktuell sida.
I Next.js kan detta uppnås med hjälp av hooken usePathname(). Denna hook kontrollerar den aktuella sökvägen i applikationen, vilket gör det möjligt att dynamiskt markera motsvarande sida med hjälp av clsx-biblioteket.
Tillbaka till projektet
För att använda hooken usePathname(), konvertera nav-links.tsx till en klientkomponent. Börja med att lägga till direktivet "use client" högst upp i filen.
Nu kan vi använda hooken usePathname och använda den.
Avslutningsvis, använd biblioteket clsx för att villkorligt applicera stilar. Ange villkoret så att om pathname är lika med link.href, ändras bakgrundsfärgen till bg-neutral-600.
I praktiken
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
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.08Skapa och Hantera Aktiva Länkar
Svep för att visa menyn
Inom webbutveckling är det vanligt att markera aktiva länkar baserat på aktuell sida.
I Next.js kan detta uppnås med hjälp av hooken usePathname(). Denna hook kontrollerar den aktuella sökvägen i applikationen, vilket gör det möjligt att dynamiskt markera motsvarande sida med hjälp av clsx-biblioteket.
Tillbaka till projektet
För att använda hooken usePathname(), konvertera nav-links.tsx till en klientkomponent. Börja med att lägga till direktivet "use client" högst upp i filen.
Nu kan vi använda hooken usePathname och använda den.
Avslutningsvis, använd biblioteket clsx för att villkorligt applicera stilar. Ange villkoret så att om pathname är lika med link.href, ändras bakgrundsfärgen till bg-neutral-600.
I praktiken
Tack för dina kommentarer!
