Bootstrap 4 如何在Gatsby和React引导中使用无序列表链接呈现导航？

将网站从HTML转换为Gatsby I有一个基本的引导4导航：

菜单

在gatsby-config.js中，我已经定义了我的菜单，我可以查询并从index.js传递到我的Navigation.js组件。根据内存，导航栏在我引用时构建为一个列表。当我研究文档和其他示例时，所有内容都以

a href

的形式构建在

div

中，并且有多种编写方式，示例：

参考问答：

代码：

{l.name}

呈现：

参考回购：

代码：

{l.name}

呈现：

完整组件供参考：

Navigation.js：

从“React”导入React
从“盖茨比”导入{Link}
//组成部分
从“./Logo”导入徽标
//引导
从'react bootstrap'导入{Navbar，Container，Nav}
//反应图标
从“反应图标/go”导入{gothreBars}
常量导航=（{menuLinks}）=>{
返回(
菜单
{menuLinks.map（（l，k）=>(
{l.name}
))}
)
}
导出默认导航

在React Bootstrap中，写入链接的正确方法是什么，以便它复制Bootstrap 4文档和上面的示例？我需要同时使用Gastby的

Link

和React Bootstrap的

Nav.Link

吗？

盖茨比的

扩展自

@reach/router

（通过React），并为“传统”React的行为添加了一些附加功能

创建如下所示的结构：

<Link key={k} to={l.link}>
  <Nav.Link eventKey={l.link}>
    {l.name}
  </Nav.Link>
</Link>

是从Bootstrap继承的，而

是从Gatsby继承的，在这个场景中，您将呈现一个列表（

和一组

作为后代，这是完全有意义的

您提供的代码：

  <Link key={k} to={l.link}>
    <Nav.Link as="li" eventKey={l.link}>
      {l.name}
    </Nav.Link>
  </Link>

{l.name}

它也是有效的，但它将

呈现为

的后代，而不封装在列表中（

），此外，它将是一个单项列表，因此不具有语义

您还可以使用提供的初学者方法，该方法不使用列表：

  <Nav className="mr-auto" activeKey={pageInfo && pageInfo.pageName}>
    <Link to="/page-2" className="link-no-style">
      <Nav.Link as="span" eventKey="page-2">
        Page 2
      </Nav.Link>
    </Link>
  </Nav>

第2页

而且它是完全有效和语义的

  <Nav className="mr-auto" activeKey={pageInfo && pageInfo.pageName}>
    <Link to="/page-2" className="link-no-style">
      <Nav.Link as="span" eventKey="page-2">
        Page 2
      </Nav.Link>
    </Link>
  </Nav>