在React中创建一个导航条多年来，导航栏，或称导航条，已经成为建设网站的一个主要特征。它们对于在网站上进行导航确实很方

多年来，导航栏，或称导航条，已经成为建设网站的一个主要特征。它们对于在网站上进行导航确实很方便。

在本教程中，我们将介绍在React中构建导航条的基本知识。我们将建立一个固定在页面顶部的导航条，用户将能够像在仪表盘上那样在网页之间切换。然后，我们将通过建立一个活生生的示例应用程序来实践我们所有新发现的技能。

我们的示例应用程序是一个动物画廊，在我们点击导航栏上的动物名称后，我们将用来查看一些不同类型的动物图片。

安装

让我们直接进入代码。要创建一个React应用程序，确保你的电脑上安装了Node.js。如果你以前没有建立过React应用，你可以通过在终端输入以下内容来检查你是否安装了Node.js。

node -v

如果没有，就去Node.js网站下载最新版本。

一旦完成，我们就可以通过运行这个命令来开始我们的React应用了。

npx create-react-app nav-bar

然后，我们在终端上导航到我们的项目文件夹。

cd nav-bar

设置React Router库

在我们的应用程序中使用React Router库，可以让我们在React中的不同页面或组件之间进行导航，并实际对每个页面或组件的URL进行这些改变。事实上，它还可以处理更复杂的功能，比如通过查询和嵌套路由在页面之间传递数据--但这已经超出了本文的范围。

在这个例子中，我们只需要安装React Router库，以帮助我们在点击链接上的动物名称时切换应用程序中的动物视图。

npm install react-router-dom

首先，我们将建立导航条本身。要做到这一点，我们将在src/components/navbar 中创建一个名为navbar.js 的文件。

import React from 'react';
import {  Link } from "react-router-dom";
const navbar= () =>{
  return (
  <div>
    <li>
      <Link to="/">Dogs</Link>
    </li>
    <li>
      <Link to="/cats">Cats</Link>
    </li>
    <li>
      <Link to="/sheeps">Sheeps</Link>
    </li>
    <li>
      <Link to="/goats">Goats</Link>
    </li>
  </div>
  );
}
export default navbar;

我们必须从我们已经安装的react-router-dom库中导入Link 。<Link> 从React Router库中开箱即用，以使我们能够导航到to 属性中的准确路由名称。它所做的是将属性内的任何内容（文本、图像等）转换成一个链接。当你点击它时，你会被带到已经在to 属性中指明的路线。

创建单独的`to` 属性链接

回到我们的例子--我们在to 属性中列出了我们的动物名称，每个名称将链接到相应的动物页面。现在，让我们为我们在导航栏中列出的动物创建组件。

我们将把它们放在src/pages/navbar ，像这样。

Dogs.js

import React from 'react';
const Dogs = () =>{
  return (
    <div>
      <h3>Dogs</h3>
      <div>
        <img src="./dog.png"/>
        <img src="./dog.png"/>
      </div>
    </div>
  );
}
export default Dogs;

Dogs.js

猫.js

import React from 'react';
const Cats = () =>{
  return (
    <div>
      <h3>Cats</h3>
      <div>
        <img src="./cat.png"/>
        <img src="./cat.png"/>
      </div>
    </div>
  );
}
export default Cats;

Cats.js

绵羊.js

import React from 'react';
const Sheeps = () =>{
  return (
    <div>
      <h3>Sheeps</h3>
      <div>
        <img src="./sheeps.png"/>
        <img src="./sheeps.jpg"/>
      </div>
    </div>
  );
}
export default Sheeps;

Sheep.js

山羊.js

import React from 'react';
const Goats = () =>{
  return (
    <div>
      <h3>Goat</h3>
      <div>
        <img src="./goats.png"/>
        <img src="./mountaingoat.jpg"/>
      </div>
    </div>
  );
}
export default Goats;

Goat.js

你会注意到，每个动物页面的代码都是一样的。

现在，进入你的App.js ，把react-router-dom导入你的项目。

import './App.css';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import navbar from "./components/navbar"
import Dogs from "./pages/Dogs"
import Cats from "./pages/Cats"
import Sheeps from "./pages/Sheeps"
import Goats from "./pages/Goats"
function App() {
  return (
    <Router>
      <navbar />
      <Switch>
        <Route path='/' exact component={Dogs} />
        <Route path='/cats' component={Cats} />
        <Route path='/sheeps' component={Sheeps} />
        <Route path='/goats' component={Goats} />
      </Switch>
    </Router>
  );
}

export default App;

当导入 react-router-don 时，你可以选择导入我们需要的特定东西。在这里，我们将导入BrowserRouter （为了清晰起见，我们将其重新命名为Router ），Switch ，以帮助我们一次在一个页面之间移动，以及Route ，以定义每个路径和其相关的组件或页面。默认情况下，一旦页面加载，用户就会被带到具有空路径的组件*path*='/' 。在我们的例子中，用户最初被送到Dogs.js 。

navbar 是在我们的Switch 之外，因为我们希望它能永久地位于我们页面的顶部，所以当我们在不同的动物组件之间切换时，它不会受到影响。

检查我们的结果

让我们启动服务器来查看我们的最终产品。只要运行下面的命令就可以了。

npm start

Final demo of our example animal app

让我们快速回顾一下我们做了什么。首先，我们使用Create React App来开始项目，然后我们安装了react-router-dom库。一旦我们的项目完成了这些，我们就建立了导航条本身，每个动物的组件也被添加进来。

最后，我们进入我们的App.js ，用我们的react router把导航条上的名字连接到相应的组件上。

结论

恭喜你，你已经成功地在React中建立了你的第一个导航条。你可以在我的GitHub上找到这个样本项目。尽管我们的导航条可以实现更复杂的路由，但这应该足以通过导航条处理不同组件之间的简单路由。

在React中创建一个导航条

安装