ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

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

标签:React 渲染动态 导航栏


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应用程序:

  1. 为您的React项目创建一个文件夹。

  2. 导航到终端上文件夹的目录,以创建一个react应用程序。

  3. 使用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并运行服务器。

  1. 导航到您的React应用程序目录。

  2. 使用npm安装react-router-dom。

  3. 在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文件。

  1. 使用您选择的任何代码编辑器打开您的项目文件夹。

  2. 在您的src目录中打开index.js文件。

  3. Import BrowserRouter from react-router-dom using object destructuring.

  4. 通过在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步-创建一个导航组件。
接下来,我们将创建一个导航组件。按照以下说明操作。

  1. 在src目录中创建一个名为“组件”的文件夹。

  2. 在组件目录中创建一个Nav.js文件。

  3. 打开您刚刚创建的Nav.js文件,并使用对象 destructuring从react-router-dom导入Link

  4. 创建一个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文件,并执行以下说明:

  1. 从页面文件夹导入所有页面文件。

  2. 从组件文件夹导入Nav组件。

  3. 使用对象破坏从react-router-dom导入路由和路由。

  4. 在App函数的返回方法上渲染Nav组件。

  5. 创建一个包含三个路由元素的路由元素。

  6. 输入每个带有路径和元素属性的路由元素。

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

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,渲染动态,导航栏
来源:

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有