nextjs 一个没有 class 的标签

Question

I currently have this code

import Link from "next/link";

const renderMenuList = (title, items, headerPath) => {
    const HeaderTag = headerPath ? Link : "span";
    if (items !== undefined && items.length === 0) {
      return null;
    }
    return (
      <div className="sidebar_menu">
        <HeaderTag href={headerPath} className="sidebar-title">
          {title}
        </HeaderTag>
        <ul className="nav-menu">{items && items.map(renderItem)}</ul>
      </div>
    );
  };

 const renderHome = () => {
    return renderMenuList("Home", undefined, paths.index);
  };

const renderNewReleases = () => {
    return renderMenuList("New Releases", newReleases);
  };

code output for renderHome is

<div class="sidebar_menu">
 <a href="/">Home</a>
 <ul class="nav-menu"></ul>
</div>

code output for renderNewReleases is

<div class="sidebar_menu">
     <span class="sidebar-title">Home</span>
     <ul class="nav-menu"></ul>
</div>

Therefore my question is why does my a tag not have the class name "sidebar-title", whereas the span tag does. I want both to have the same class name.

Answer 1

As @Drew Reese points out: Link is merely a wrapper and does not have a className attribute

Try:

({href,className,children}) => <Link href={href}> <a className={className}> {children} </a> </Link>

instead of Link