如何为不同Link组件传递不同href属性至原始Link组件？

由@Nikhil bhatia提供的可行方案如下，下方原帖包含问题详情及其他尝试思路：

export default function TopNav(props) {
    const { data } = props

    return (
      <StyledDiv>
        <nav>
          <ul>
            {data.map(item => <StyledLi key={item.name} >
              <Link href={item.href}>{item.name}</Link>
            </StyledLi> )}
          </ul>
        </nav>
      </StyledDiv>
    );
}

问题 #

我有一个作为链接展示模板的组件，链接内容会根据当前所在页面变化。主页有about、projects、blog三个链接，进入任一页面后，需显示另外两个页面的链接。因此每个页面的链接名称和href属性都不同，目前已能传递链接名称，但不知如何传递href属性。

核心问题 #

如何将单个href属性透传至原始Link组件？

现有尝试 #

链接组件 #

我尝试过用模板字面量写法：

<Link href={`/${linkA_Url}`}>{linkA}</Link>

当前的组件代码如下：

export default function TopNav({ linkA, linkB }) {
  return (
    <StyledDiv>
      <nav>
        <ul>
          <StyledLi>
            <Link href="/">{linkA}</Link>
          </StyledLi>
          <StyledLi>
            <Link href="/">{linkB}</Link>
          </StyledLi>
          <StyledLi>
            <Link href="/">⬅</Link>
          </StyledLi>
        </ul>
      </nav>
    </StyledDiv>
  );
}

页面组件 #

about、projects、blog页面都使用上述TopNav组件，以about页面为例，目前仅能传递链接名称，尝试传递href时遇到属性命名冲突问题，期望写法类似<TopNav href="/projects" href="/blog" linkA="projects" linkB="blog" />但无法实现。当前页面代码：

export default function About({ title, linkA, linkB }) {
  return (
    <>
      <TopNav linkA="projects" linkB="blog" />
    </>
  );
}

注：若主页链接未居中，需刷新预览窗口，该问题已单独提问。

内容的提问来源于stack exchange，提问作者Josh