如何在 React 中构建导航栏：分步指南-js教程-PHP中文网

How to Build a Navigation Bar in React: A Step-by-Step Guide

嘿那里！准备好为您的 React 应用程序构建一个很棒的导航栏 (navbar) 了吗？在本指南中，我们将引导您了解从设计注意事项到实施和可访问性最佳实践的所有内容。让我们潜入吧！

为什么导航栏很重要？

导航栏是任何 Web 应用程序的关键元素。它允许用户浏览网站的不同页面和部分。如果没有精心设计的导航栏，用户很容易迷失或沮丧，因此确保您的导航栏具有所有必要的链接和辅助功能非常重要。

要点

基本元素：导航栏对于帮助用户导航您的网站至关重要。
可重用组件：React 非常适合创建可重用和模块化组件，非常适合构建导航栏。
可访问性很重要：确保您的导航栏可访问意味着所有用户（包括残障人士）都可以有效地导航您的网站。

什么是导航栏？

导航栏是一种用户界面元素，通常位于网页的顶部或侧面。它充当导航辅助工具，提供允许用户访问网站内不同部分或页面的链接或按钮。精心设计的导航栏可帮助用户了解网站的结构并在其各个部分之间轻松移动。

精心设计的导航栏示例

Airbnb：干净简约的设计，清晰链接到“住宿地点”、“体验”和“在线体验”等部分。
Dropbox：简单而有效，具有突出的“产品”下拉菜单，可探索不同的产品。

在 React 中构建导航栏

让我们为一个名为“ShopNow”的电子商务网站构建一个导航栏。

第 1 步：设计导航栏

在开始编码之前，让我们先规划一下设计。对于 ShopNow，我们将有：

左侧的标志
“产品”、“关于我们”和“联系方式”等部分的链接
带有徽章的购物车图标，显示商品数量
用于“登录”和“我的帐户”等帐户操作的用户图标

这是它的外观模型：

徽标：左侧为“ShopNow”
链接：中间“产品”、“关于我们”、“联系方式”
图标：右侧的购物车和用户图标

第 2 步：设置 React 项目

首先，使用 Create React App 设置一个新的 React 项目：

npx create-react-app shopnow
cd shopnow
npm start

登录后复制

第三步：创建导航栏组件

在 src 目录中创建一个名为 Navbar.js 的新文件，并添加以下代码：

import React from 'react';
import './Navbar.css';

const Navbar = () => {
  return (
    <nav className="navbar">
      {/* Navbar content goes here */}
    </nav>
  );
};

export default Navbar;

登录后复制

现在，在同一目录中创建一个 Navbar.css 文件来设置导航栏的样式。

第四步：添加导航栏结构

在 Navbar 组件内部添加导航栏的结构：

import React from 'react';
import './Navbar.css';

const Navbar = () => {
  return (
    <nav className="navbar">
      <div className="navbar-left">
        <a href="/" className="logo">
          ShopNow
        </a>
      </div>
      <div className="navbar-center">
        <ul className="nav-links">
          <li><a href="/products">Products</a></li>
          <li><a href="/about">About Us</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </div>
      <div className="navbar-right">
        <a href="/cart" className="cart-icon">
          <i className="fas fa-shopping-cart"></i>
          <span className="cart-count">0</span>
        </a>
        <a href="/account" className="user-icon">
          <i className="fas fa-user"></i>
        </a>
      </div>
    </nav>
  );
};

export default Navbar;

登录后复制

此代码将导航栏分为三个部分：左侧为徽标，中心为导航链接，右侧为图标。

第 5 步：设置导航栏样式

打开 Navbar.css 并添加以下样式：

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: #fff;
  padding: 1rem;
}

.navbar-left .logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
}

.navbar-center .nav-links {
  list-style-type: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.navbar-center .nav-links li {
  margin-right: 1rem;
}

.navbar-center .nav-links a {
  color: #fff;
  text-decoration: none;
}

.navbar-right {
  display: flex;
  align-items: center;
}

.navbar-right .cart-icon,
.navbar-right .user-icon {
  color: #fff;
  text-decoration: none;
  margin-left: 1rem;
  position: relative;
}

.navbar-right .cart-count {
  background-color: #f44336;
  color: #fff;
  border-radius: 50%;
  padding: 0.2rem 0.5rem;
  font-size: 0.8rem;
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
}

登录后复制

第 6 步：导入并渲染导航栏

最后，导入 Navbar 组件并将其呈现在您的 App.js 文件中：

import React from 'react';
import Navbar from './Navbar';

function App() {
  return (
    <div>
      <Navbar />
      {/* Rest of your app content goes here */}
    </div>
  );
}

export default App;

登录后复制

现在，当您运行 React 应用程序时，您应该会在页面顶部看到导航栏。

第 7 步：增强可访问性

可访问性对于确保所有用户都可以浏览您的网站至关重要。以下是一些最佳实践：

使用语义 HTML：我们使用了
、
添加 ARIA 角色和属性：在
上使用 role="navigation"元素。
确保键盘可访问性：测试选项卡导航并确保交互元素可聚焦。
提供清晰的焦点样式：为链接和图标的:focus状态添加CSS规则。
使用描述性链接文本：对图标使用 aria-label 属性：

<a href="/cart" className="cart-icon" aria-label="Shopping Cart">
  <i className="fas fa-shopping-cart"></i>
  <span className="cart-count">0</span>
</a>
<a href="/account" className="user-icon" aria-label="User Account">
  <i className="fas fa-user"></i>
</a>

登录后复制

使布局响应式：使用媒体查询调整不同屏幕尺寸的样式：

@media (max-width: 768px) {
  .navbar-center .nav-links {
    display: none;
  }

  .navbar-right {
    display: flex;
    align-items: center;
  }

  .navbar-right .hamburger-menu {
    display: block;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
  }
}

登录后复制