React 中的導航欄

Rana Hasnain Khan 2022年5月18日

React React Navbar

我們將演示如何在 React 中建立導航欄。

React 中的導航欄

導航欄是 GUI 的一部分，旨在幫助訪問者訪問你網站的資訊。

我們將首先在 CLI 中使用 npx 建立一個新專案以建立一個導航欄。

# CLI
npx create-react-app navigation

或者使用 npm。

# CLI
npm init create-react-app navigation

或者使用 yarn。

# CLI
yarn create react-app navigation

一旦我們在 React 中建立了一個新專案。我們將在 VS Code 中開啟它，方法是進入 navigation 目錄並輸入以下命令。

# CLI
cd navigation
code .

使用終端，我們可以啟動我們的應用程式。

# React Terminal
npm start

讓我們在 src 資料夾中建立一個新的 components 資料夾。在 components 資料夾中，我們需要建立另一個 Navbar 資料夾。在 Navbar 資料夾中，讓我們建立兩個名為 Navbar.js 和 Navbar.css 的新檔案。

在 Navbar.js 中，我們必須從 React 匯入 React 和 Component 並建立 Navbar 類。

Navbar.js 中的程式碼將如下所示。

# react 
import React, { Component } from "react";

export class Navbar extends Component{
  render(){
    return{
      
    }
  }
}

讓我們返回一個基本的導航欄。

# react
import React from "react";
import { MenuItems } from "./MenuItems";
import { Nav } from "react-bootstrap";

export default function Navbar() {
  return (
    <Nav className="NavbarItems">
      <h1 className="Navbar-logo">React</h1>
      <div className="menu-icon"></div>
      <ul>
        <li><a href="#"></a></li>
      </ul>
    </Nav>
  );
}

我們將建立另一個名為 MenuItems.js 的檔案來定義選單項陣列。如果我們以後想改變它，我們可以很容易地從一個檔案中改變它。

MenuItems.js 中的程式碼將如下所示。

# react
export const MenuItems = [
  {
    Title: "Home",
    url: "#",
    cName: "nav-links"
  },
  {
    Title: "About Us",
    url: "#",
    cName: "nav-links"
  },
  {
    Title: "Our Services",
    url: "#",
    cName: "nav-links"
  },
  {
    Title: "Contact Us",
    url: "#",
    cName: "nav-links"
  },
  {
    Title: "Sign Up",
    url: "#",
    cName: "nav-links-mobile"
  }
];

title 將是選單項的名稱，而 URL 將是該頁面的連結，cName 將是類名。我們可以根據需要為任意數量的選單項複製和貼上此結構。最後一項是移動選單，所以新增 nav-links-mobile。

我們將把 MenuItems 匯入 Navbar.js。

# react
import { MenuItems } from "MenuItems"

我們將對映 MenuItems。Navbar.js 看起來像這樣。

# react
import React from "react";
import { MenuItems } from "./MenuItems";
import { Nav } from "react-bootstrap";

export default function Navbar() {
  return (
    <Nav className="NavbarItems">
      <h1 className="Navbar-logo">React</h1>
      <div className="menu-icon"></div>
      <ul>
        {MenuItems.map((item, index) => {
          return (
            <li key={index}>
              <a className={item.cName} href={item.url}>
                {item.Title}
              </a>
            </li>
          );
        })}
      </ul>
    </Nav>
  );
}

我們將在 App.js 中匯入 Navbar.js。

# react
import "./styles.css";
import Navbar from "./components/Navbar/Navbar";

export default function App() {
  return (
    <div className="App">
      <Navbar />
    </div>
  );
}

輸出：

導航欄 React

讓我們新增一些 CSS 程式碼，讓它看起來像一個導航選單。

# react
body {
  margin: 0;
  padding: 0;
}
.NavbarItems {
  background-color: black;
  margin: 0;
  padding: 0;
  height: 80px;
}

.NavbarItems h1 {
  color: white;
  padding: 10px;
  font-size: 25px;
}
.logo {
  width: 20%;
  float: left;
}
.navbar-ul {
  width: 80%;
  float: left;
  list-style: none;
  margin: 0px;
  padding: 0;
}
li {
  display: inline;
  list-style: none;
  font-size: 18px;
  padding: 10px;
  line-height: 80px;
}
.nav-links {
  color: white;
  text-decoration: none;
}
.nav-links-mobile {
  color: white;
  text-decoration: none;
}
li:hover {
  background-color: white;
}
li:hover .nav-links {
  color: black;
}
li:hover .nav-links-mobile {
  color: black;
}

輸出：

在 React 最終結果中導航

這就是我們如何在 React 中進行導航並使用元件將其匯入任何頁面的方式。

Author: Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.