Next.js條件樣式

Question

<p>如果路徑與連結的href相匹配，我想讓連結有效。 </p>
<pre><code> function Component() {
 const pathname = usePathname();
  return (
      <div className="links">
        <Link href="/">首頁</Link>
        <Link href="/store" className={`${pathname === this.href && "active"}`} >商店</Link>
        <Link href="/actors">演員</Link>
      </div>
 )
 }</code>

我嘗試了這個，但不幸的是沒有起作用。我能做這樣的事嗎？

Answer 1

在只能在類別元件中存取的功能元件中，你不能使用this。要實現你想要的效果，你只需要手動編寫程式碼，例如：

<Link href="/store" className={`${pathname === "/store" ? "active":""}`} >商店</Link>

也要注意在className中不要使用&&，因為如果條件不成立，它會在你的className中加入false，所以可以使用三元運算符，在條件為false時加上"" 。