」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 如何在 React 中建立導覽列:逐步指南

如何在 React 中建立導覽列:逐步指南

發佈於2024-08-01
瀏覽:463

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

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

为什么导航栏很重要?

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

要点

  1. 基本元素:导航栏对于帮助用户浏览您的网站至关重要。
  2. 可重用组件:React 非常适合创建可重用和模块化组件,非常适合构建导航栏。
  3. 辅助功能很重要:确保您的导航栏易于访问意味着所有用户(包括残障人士)都可以有效地导航您的网站。

什么是导航栏?

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

精心设计的导航栏示例

  • 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 (
    
  );
};

export default Navbar;

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

第四步:添加导航栏结构

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

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

const Navbar = () => {
  return (
    
  );
};

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 (
    
{/* Rest of your app content goes here */}
); } export default App;

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

第 7 步:增强可访问性

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

  1. 使用语义 HTML:我们适当地使用了
版本聲明 本文轉載於:https://dev.to/udoka_emmanuel/how-to-build-a-navigation-bar-in-react-a-step-by-step-guide-2pcp?1如有侵犯,請聯絡study_golang @163.com刪除
最新教學 更多>
  • 在 Go 中使用 WebSocket 進行即時通信
    在 Go 中使用 WebSocket 進行即時通信
    构建需要实时更新的应用程序(例如聊天应用程序、实时通知或协作工具)需要比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方!今天,我们将探讨如何在 Go 中使用 WebSocket,以便您可以向应用程序添加实时功能。 在这篇文章中,我们将介绍: WebSocke...
    程式設計 發佈於2024-12-22
  • 儘管程式碼有效,為什麼 POST 請求無法擷取 PHP 中的輸入?
    儘管程式碼有效,為什麼 POST 請求無法擷取 PHP 中的輸入?
    解決PHP 中的POST 請求故障在提供的程式碼片段中:action=''而非:action="<?php echo $_SERVER['PHP_SELF'];?>";?>"檢查$_POST陣列:表單提交後使用 var_dump 檢查 $_POST 陣列的內...
    程式設計 發佈於2024-12-22
  • 插入資料時如何修復「常規錯誤:2006 MySQL 伺服器已消失」?
    插入資料時如何修復「常規錯誤:2006 MySQL 伺服器已消失」?
    插入記錄時如何解決「一般錯誤:2006 MySQL 伺服器已消失」介紹:將資料插入MySQL 資料庫有時會導致錯誤「一般錯誤:2006 MySQL 伺服器已消失」。當與伺服器的連線遺失時會出現此錯誤,通常是由於 MySQL 配置中的兩個變數之一所致。 解決方案:解決此錯誤的關鍵是調整wait_tim...
    程式設計 發佈於2024-12-22
  • Bootstrap 4 Beta 中的列偏移發生了什麼事?
    Bootstrap 4 Beta 中的列偏移發生了什麼事?
    Bootstrap 4 Beta:列偏移的刪除和恢復Bootstrap 4 在其Beta 1 版本中引入了重大更改柱子偏移了。然而,隨著 Beta 2 的後續發布,這些變化已經逆轉。 從 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中, offset-md-*...
    程式設計 發佈於2024-12-22
  • 為什麼 Chrome 自動更新會導致 Selenium 相容性問題?
    為什麼 Chrome 自動更新會導致 Selenium 相容性問題?
    了解問題:自動Chrome 更新與Selenium 相容性Selenium 是廣泛使用的Web 自動化工具,利用ChromeDriver 與Chrome 瀏覽器。但是,由於 Chrome 自動更新,您的程式碼可能會失敗,導致您的測試不可靠。 衝突背後的原因每個 Chrome 瀏覽器版本都包含新功能和...
    程式設計 發佈於2024-12-22
  • 大批
    大批
    方法是可以在物件上呼叫的 fns 數組是對象,因此它們在 JS 中也有方法。 slice(begin):將陣列的一部分提取到新數組中,而不改變原始數組。 let arr = ['a','b','c','d','e']; // Usecase: Extract till index ...
    程式設計 發佈於2024-12-22
  • 如何在 PHP 中組合兩個關聯數組,同時保留唯一 ID 並處理重複名稱?
    如何在 PHP 中組合兩個關聯數組,同時保留唯一 ID 並處理重複名稱?
    在 PHP 中組合關聯數組在 PHP 中,將兩個關聯數組組合成一個數組是常見任務。考慮以下請求:問題描述:提供的代碼定義了兩個關聯數組,$array1 和 $array2。目標是建立一個新陣列 $array3,它合併兩個陣列中的所有鍵值對。 此外,提供的陣列具有唯一的 ID,而名稱可能重疊。要求是建...
    程式設計 發佈於2024-12-22
  • HTML 格式標籤
    HTML 格式標籤
    HTML 格式化元素 **HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without us...
    程式設計 發佈於2024-12-22
  • 如何使用 DockerMake 將多個 Docker 映像組合成一個單元?
    如何使用 DockerMake 將多個 Docker 映像組合成一個單元?
    Docker:組合多個映像Docker 是一個容器化平台,可實現應用程式及其相依性的隔離和打包。雖然它通常用於管理單一影像,但在某些情況下您可能需要將多個影像組合成一個單元。 組合通用映像和特定映像:場景考慮一個場景,您擁有通用的 Java 和 MySQL 映像,並且您想要建立一個結合了 Java ...
    程式設計 發佈於2024-12-22
  • 如何透過命令列運行某個目錄下的所有Go檔案?
    如何透過命令列運行某個目錄下的所有Go檔案?
    使用命令列運行目錄中的所有Go 文件作為Go 的初學者,在處理多個文件時可能會遇到挑戰在你的包裹裡。雖然執行主文件的傳統方法(例如 go run main.go)可能不夠,但有一個更有效的解決方案。 要從命令列執行目錄中的所有 Go 文件,您可以只需使用命令 go run .. 該命令利用了一項特殊...
    程式設計 發佈於2024-12-22
  • 如何從 SQLite 中的 DATETIME 欄位中提取月份?
    如何從 SQLite 中的 DATETIME 欄位中提取月份?
    從 SQLite 的 DATETIME 檢索月份從 SQLite 的 DATETIME 欄位中提取月份時遇到了困難。雖然 Month(dateField) 和 strftime('%m', dateStart) 等方法被證明無效,但這裡有一個解決方案可以幫助您成功檢索月份。 根據您的...
    程式設計 發佈於2024-12-22
  • 使用 `mysql_real_escape_string()` 和 `mysql_escape_string()` 足以保護您的應用程式嗎?
    使用 `mysql_real_escape_string()` 和 `mysql_escape_string()` 足以保護您的應用程式嗎?
    mysql_real_escape_string() 和 mysql_escape_string() 足以確保應用程式安全嗎? 雖然這些函數可以提供一些針對 SQL 注入和其他攻擊的保護,但他們未能解決某些漏洞。 SQL如果您在查詢中不正確地處理 PHP 變量,注入Mysql_real_escape...
    程式設計 發佈於2024-12-22
  • MySQL 的 Profiler 是用於資料庫效能分析的 SQL Server Profiler 的可行替代方案嗎?
    MySQL 的 Profiler 是用於資料庫效能分析的 SQL Server Profiler 的可行替代方案嗎?
    探索MySQL Profiler 及其功能SQL Server Profiler 已被證明對於開發人員、測試人員和資料庫應用程式除錯人員具有無價的價值。其圖形使用者介面和強大的追蹤功能使其成為首選工具。但是依賴 MySQL 資料庫的使用者怎麼辦?是否有一個等效的解決方案可以提供相同的多功能性和洞察力...
    程式設計 發佈於2024-12-22
  • 如何在 Java 中安全地解析以逗號作為小數分隔符號的雙精度數?
    如何在 Java 中安全地解析以逗號作為小數分隔符號的雙精度數?
    如何有效解析以逗號為小數分隔符號的雙精度型問題: ]字串值使用逗號作為分隔符號表示十進位數字,例如“1,234”,在使用解析時可能會導致NumberFormatException Double.valueOf().建議的解決方案:建議的解決方案:使用p = p.replaceAll(",&...
    程式設計 發佈於2024-12-22
  • 如何將 PHP 陣列轉換為 JavaScript 陣列?
    如何將 PHP 陣列轉換為 JavaScript 陣列?
    將 PHP 陣列轉換為 JavaScript使用 PHP 和 JavaScript 時,在它們之間交換資料至關重要。一項常見任務是將 PHP 陣列轉換為 JavaScript 陣列。本文將深入探討實現這種轉換的過程。 問題:給定一個PHP 數組,如何將其轉換為特定格式的JavaScript 數組?解...
    程式設計 發佈於2024-12-22

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3