如何在 Gatsby 和 React Bootstrap 中使用无序列表链接呈现导航？
How to render nav with unordered list links in Gatsby and React Bootstrap?
将站点从 HTML 转换为 Gatsby 我有一个基本的 Bootstrap 4 导航：
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand logo" href="/">
<!-- SVG Logo -->
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
</ul>
</div>
</div>
</nav>
在gatsby-config.js中我已经定义了我的菜单，我可以从index.js[=50=查询和传递下去] 到我的 Navigation.js 组件。根据记忆，当我引用 Navbar docs. When I research the documentation for React Bootstrap 和其他示例时，导航栏构建为列表，所有内容都在 div 中构建为 a href 并且有多种编写方式，示例：
参考问答：
代码：
<Nav.Link as={Link} eventKey={l.link}>
{l.name}
</Nav.Link>
呈现：
<a aria-current="page" class href=""><li data-rb-event-key="/" class="nav-link">home</li></a>
<a href="/mon"><li data-rb-event-key="mon" class="nav-link">Monday</li></a>
<a href="/tues"><li data-rb-event-key="tues" class="nav-link">Tuesday</li></a>
参考回购：Gatsby React Bootstrap Start
代码：
<Link key={k} to={l.link}>
<Nav.Link as="li" eventKey={l.link}>
{l.name}
</Nav.Link>
</Link>
呈现：
<div class="justify-content-end navbar-nav">
<a aria-current="page" class="" href="/">
<li data-rb-event-key="/" class="nav-link">home</li>
</a>
<a href="/mon">
<li data-rb-event-key="mon" class="nav-link">Monday</li>
</a>
<a href="/tues">
<li data-rb-event-key="tues" class="nav-link">Tuesday</li>
</a>
</div>
完整组件供参考：
Navigation.js:
import React from 'react'
import { Link } from 'gatsby'
// Components
import Logo from './Logo'
// Bootstrap
import { Navbar, Container, Nav } from 'react-bootstrap'
// React Icons
import { GoThreeBars } from 'react-icons/go'
const Navigation = ({ menuLinks }) => {
return (
<Navbar id="headNav" collapseOnSelect expand="lg">
<Container>
<Navbar.Brand href="/">
<Logo id="logo" />
</Navbar.Brand>
<Navbar.Toggle
className="navbar-toggler navbar-toggler-right"
aria-controls="responsive-navbar-nav"
>
Menu <GoThreeBars />
</Navbar.Toggle>
<Navbar.Collapse id="responsive-navbar-nav" className="collapse navbar-collapse">
<Nav className="justify-content-end">
{menuLinks.map((l, k) => (
<Link key={k} to={l.link}>
<Nav.Link as="li" eventKey={l.link}>
{l.name}
</Nav.Link>
</Link>
))}
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
)
}
export default Navigation
在 React Bootstrap 中，编写链接的正确方法是什么，以便它将复制 Bootstrap 4 文档和上面的示例？我需要同时使用 Gastby 的 Link 和 React Bootstrap 的 Nav.Link 吗？
Gatsby 的 <Link> 扩展自 @reach/router（通过 React）并为“传统”React 的行为添加了一些附加功能。
正在创建如下结构：
<Link key={k} to={l.link}>
<Nav.Link eventKey={l.link}>
{l.name}
</Nav.Link>
</Link>
注意：我已经删除了 as prop，默认情况下它会带一个锚点。
您将 <a> 渲染为另一个 <a> 的后代，这会导致一些注意事项和一些潜在问题。所以你应该避免它。
如果你使用的是 React 的 Bootstrap，<Link> 组件继承自 React 而不是 Gatsby，这也很好，它会保留组件的主要功能（只补充需要的部分）部分，保持跨应用程序的导航等）。
结合 Bootstrap 和 Gatsby 的理想方法应该和您提供的结构如下所示：
<ul>
<Nav.Link as="li" eventKey={l.link}>
<Link key={k} to={l.link}>
{l.name}
</Link>
</Nav.Link>
</ul>
<Nav> 继承自 Bootstrap 而 <Link> 继承自 Gatsby，在这种情况下，您将呈现一个列表（<ul> 和一组 <li>s) 以 <a> 作为后代，这是完全合理的。
您提供的代码：
<Link key={k} to={l.link}>
<Nav.Link as="li" eventKey={l.link}>
{l.name}
</Nav.Link>
</Link>
它也是有效的，但是它将 <li> 呈现为 <a> 的后代，而不是包含在列表 (<ul>) 中，此外，将是一个 -项目列表，因此它不是语义的。
您也可以使用提供的入门方法，它不使用列表：
<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>
而且它是完全有效和语义化的。
将站点从 HTML 转换为 Gatsby 我有一个基本的 Bootstrap 4 导航：
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand logo" href="/">
<!-- SVG Logo -->
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
</ul>
</div>
</div>
</nav>
在gatsby-config.js中我已经定义了我的菜单，我可以从index.js[=50=查询和传递下去] 到我的 Navigation.js 组件。根据记忆，当我引用 Navbar docs. When I research the documentation for React Bootstrap 和其他示例时，导航栏构建为列表，所有内容都在 div 中构建为 a href 并且有多种编写方式，示例：
参考问答：
代码：
<Nav.Link as={Link} eventKey={l.link}>
{l.name}
</Nav.Link>
呈现：
<a aria-current="page" class href=""><li data-rb-event-key="/" class="nav-link">home</li></a>
<a href="/mon"><li data-rb-event-key="mon" class="nav-link">Monday</li></a>
<a href="/tues"><li data-rb-event-key="tues" class="nav-link">Tuesday</li></a>
参考回购：Gatsby React Bootstrap Start
代码：
<Link key={k} to={l.link}>
<Nav.Link as="li" eventKey={l.link}>
{l.name}
</Nav.Link>
</Link>
呈现：
<div class="justify-content-end navbar-nav">
<a aria-current="page" class="" href="/">
<li data-rb-event-key="/" class="nav-link">home</li>
</a>
<a href="/mon">
<li data-rb-event-key="mon" class="nav-link">Monday</li>
</a>
<a href="/tues">
<li data-rb-event-key="tues" class="nav-link">Tuesday</li>
</a>
</div>
完整组件供参考：
Navigation.js:
import React from 'react'
import { Link } from 'gatsby'
// Components
import Logo from './Logo'
// Bootstrap
import { Navbar, Container, Nav } from 'react-bootstrap'
// React Icons
import { GoThreeBars } from 'react-icons/go'
const Navigation = ({ menuLinks }) => {
return (
<Navbar id="headNav" collapseOnSelect expand="lg">
<Container>
<Navbar.Brand href="/">
<Logo id="logo" />
</Navbar.Brand>
<Navbar.Toggle
className="navbar-toggler navbar-toggler-right"
aria-controls="responsive-navbar-nav"
>
Menu <GoThreeBars />
</Navbar.Toggle>
<Navbar.Collapse id="responsive-navbar-nav" className="collapse navbar-collapse">
<Nav className="justify-content-end">
{menuLinks.map((l, k) => (
<Link key={k} to={l.link}>
<Nav.Link as="li" eventKey={l.link}>
{l.name}
</Nav.Link>
</Link>
))}
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
)
}
export default Navigation
在 React Bootstrap 中，编写链接的正确方法是什么，以便它将复制 Bootstrap 4 文档和上面的示例？我需要同时使用 Gastby 的 Link 和 React Bootstrap 的 Nav.Link 吗？
Gatsby 的 <Link> 扩展自 @reach/router（通过 React）并为“传统”React 的行为添加了一些附加功能。
正在创建如下结构：
<Link key={k} to={l.link}>
<Nav.Link eventKey={l.link}>
{l.name}
</Nav.Link>
</Link>
注意：我已经删除了 as prop，默认情况下它会带一个锚点。
您将 <a> 渲染为另一个 <a> 的后代，这会导致一些注意事项和一些潜在问题。所以你应该避免它。
如果你使用的是 React 的 Bootstrap，<Link> 组件继承自 React 而不是 Gatsby，这也很好，它会保留组件的主要功能（只补充需要的部分）部分，保持跨应用程序的导航等）。
结合 Bootstrap 和 Gatsby 的理想方法应该和您提供的结构如下所示：
<ul>
<Nav.Link as="li" eventKey={l.link}>
<Link key={k} to={l.link}>
{l.name}
</Link>
</Nav.Link>
</ul>
<Nav> 继承自 Bootstrap 而 <Link> 继承自 Gatsby，在这种情况下，您将呈现一个列表（<ul> 和一组 <li>s) 以 <a> 作为后代，这是完全合理的。
您提供的代码：
<Link key={k} to={l.link}>
<Nav.Link as="li" eventKey={l.link}>
{l.name}
</Nav.Link>
</Link>
它也是有效的，但是它将 <li> 呈现为 <a> 的后代，而不是包含在列表 (<ul>) 中，此外，将是一个 -项目列表，因此它不是语义的。
您也可以使用提供的入门方法，它不使用列表：
<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>
而且它是完全有效和语义化的。