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

Question

将网站从 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 传递到我的 Navigation.js 组件。当我引用Navbar docs 时，每个内存都会将导航栏构建为列表。当我研究React Bootstrap 和其他示例的文档时，所有内容都构建为a href 在div 中，并且有多种编写方式，示例：

参考问答：React-Bootstrap link item in a navitem

代码：

<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 吗？

Answer 1

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>

而且它完全有效且符合语义。