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.