创建使用React渲染动态内容的导航栏的实用步骤

2023-07-28 18:24:44 阅读：224 来源： 互联网

React中的新手会发现创建渲染不同内容的导航栏具有挑战性。React以构建单页应用程序（SPA）而闻名，它不提供任何路由模式。尽管如此，React中的路由是使用称为React-router-dom的外部库完成的。本文旨在实现使用React创建导航栏。此导航栏将使用户能够在内部链接之间导航并呈现不同的内容。

为了更好地了解我们创建导航栏，本文将解释以下概念：

反应
SPA
反应路由器Dom
路由。

什么是React？

React也称为ReactJS，是一个用于构建交互式和动态Web界面的JavaScript库。换句话说，React构建了与用户交互的网页的前端。

虽然React是作为前端库创建的，但多年来，React不断发展，现在可用于构建完整的应用程序。一般来说，React可用于开发以下内容：

单页应用程序（SPA）
使用Next.js、Gatsby.js等框架的后端服务器
使用React Native的移动应用程序。

什么是单页应用程序（SPA）？

SPA是根据用户请求呈现不同内容的网站，无需加载新页面。例如，当用户单击指向网站其他页面的导航链接时，默认网站会加载一个全新的页面。SPA与默认网站形成鲜明对比。SPA在单个静态页面上加载不同的网页内容。

什么是React-router？

React-router是一个外部库，使React应用程序能够在链接之间导航，并根据用户请求呈现不同的内容。在React中使用之前，必须先安装React路由器。

什么是路由？

路由是使用基于用户请求的链接导航到不同网站、内容或页面的行为。通过路由，用户可以访问网站上的不同内容。

创建渲染动态内容的导航栏的实用步骤。

在本节中，我们将构建一个React导航栏，其中包含根据用户请求渲染不同内容的链接。

注意：要使用React官方文档推荐创建React应用程序，您必须在计算机上安装Node.js和NPM。如果您的计算机上没有Node.js和NPM，请访问https://nodejs.org下载它们。

先决条件：为了充分利用本文，重要的是要熟悉JavaScript和React库工具，如对象、对象析构、JSX、组件和变量等。如果您不熟悉上述工具，我建议您花一些时间学习和熟悉它们。准备好学习了吗？让我们开始吧。

第1步-创建一个React应用程序。
按照以下说明创建React应用程序：

为您的React项目创建一个文件夹。
导航到终端上文件夹的目录，以创建一个react应用程序。
使用npx或npm或纱线创建您的react应用程序，如以下代码所示。

C:\Users\Username\Desktop>mkdir react-app
C:\Users\Username\Desktop>cd react-app
C:\Users\Username\Desktop\react-app>npx create-react-app my-app

奥勒冈州

C:\Users\Username\Desktop\react-app>npm init react-app my-app

奥勒冈州

C:\Users\Username\Desktop\react-app>Yarn create-react-app my-app

注意以下几点：

react-app是文件夹名称，它可以是您选择的任何名称。
my-app是您React应用程序的名称，它可以是您选择的任何名称。

第2步-安装react-router-dom并运行服务器。
按照以下说明安装react-router-dom并运行服务器。

导航到您的React应用程序目录。
使用npm安装react-router-dom。
在react-router-dom完成安装后，使用npm启动服务器。

请参阅下面的代码。

C:\Users\Username\Desktop\react-app>cd my-app
C:\Users\Username\Desktop\react-app\my-app>npm install react-router-dom
C:\Users\Username\Desktop\react-app\my-app>npm start

开发服务器运行一些脚本，然后您的默认浏览器在localhost:3000上打开，并显示以下图像。

React主页

第3步-修改index.js文件。
在这一步中，我们将开始对程序进行编码，因为我们已经创建了包含所有必要安装的应用程序。以下说明指导我们修改index.js文件。

使用您选择的任何代码编辑器打开您的项目文件夹。
在您的src目录中打开index.js文件。
Import BrowserRouter from react-router-dom using object destructuring.
通过在BrowserRouter标签之间包装应用程序组件来更新根常量。

我们的最终代码将和下面的示例一样。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

第4步-创建页面。
在这一步中，我们将创建具有不同内容的不同页面。以下说明指导我们创建必要的页面：

首先，在src目录中使用以下文件创建一个名为pages的文件夹：

Home.js
关于.js
Contact.js。

接下来，用其动态内容填充每个文件，如下所示。

Home.js

function Home(){

    return (
        <>
          <h1>Home Page</h1>
        </>
    );
}

export default Home;

关于.js

function About(){

    return (
        <>
          <h1>About Page</h1>
        </>
    );
}

export default About;

联系.js

function Contact(){

    return (
        <>
          <h1>Contact Page</h1>
        </>
    );
}

export default Contact;

第5步-创建一个导航组件。
接下来，我们将创建一个导航组件。按照以下说明操作。

在src目录中创建一个名为“组件”的文件夹。
在组件目录中创建一个Nav.js文件。
打开您刚刚创建的Nav.js文件，并使用对象 destructuring从react-router-dom导入Link。
创建一个Nav函数，该函数返回带有类导航的导航元素。
请参阅下面的代码。

import { Link } from "react-router-dom";

function Nav(){
    return (
        <>
          <nav className="nav">
            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
            <Link to="/contact">Book</Link>
          </nav>
        </>
    );
}

export default Nav;

在上面的代码中，在导航标签之间，我们有三个链接元素。链接元素将在我们的浏览器上显示为链接，并将用于在页面之间导航。链接打开标签接受指向其链接到的资源的“to”属性。

第6步-修改App.js文件。
在src目录中打开App.js文件，并执行以下说明：

从页面文件夹导入所有页面文件。
从组件文件夹导入Nav组件。
使用对象破坏从react-router-dom导入路由和路由。
在App函数的返回方法上渲染Nav组件。
创建一个包含三个路由元素的路由元素。
输入每个带有路径和元素属性的路由元素。

我们的最终代码应该像下面的示例一样。

import React from 'react';
import './App.css';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import Nav from './components/Nav';
import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <Nav />

      <Routes>
        <Route path='/' element={<Home />}></Route>
        <Route path='/about' element={<About />}></Route>
        <Route path='/contact' element={<Contact />}></Route>
      </Routes>
    </div>
  );
}

export default App;

在上述代码中，路径属性指示URL路由。主页组件的前斜杠表示默认路由。元素属性接受要渲染的组件，这是我们之前导入的。

第7步-设置导航栏的样式。
将CSS样式添加到我们的导航组件中。这可以在index.css文件中完成。请参阅下面的代码。

.navbar{
  background-color: rgb(14, 136, 207);
  padding: 3px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.navbar a{
  text-decoration: none;
  color: white;
  font-size: 1.3rem;
}

.navbar a:hover{
  color: aqua;
}

注意：我们在设置链接元素样式时使用“a”元素选择器。这是因为链接元素是锚标签，但功能略有不同。

保存您的代码并导航到您的浏览器。就像下面的视频一样，我们现在可以在链接之间导航并渲染不同的内容。

总之，我们创建了一个带有导航栏的React应用程序，使我们能够在链接之间导航。这一切都要感谢React-router-dom。这不是结束，React-router-dom还有更多用途。探索更多关于React-router-dom的信息，并获得更多使用它的经验。

标签：React,渲染动态,导航栏
来源：