编程语言
首页 > 编程语言> > 创建使用React渲染动态内容的导航栏的实用步骤

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

作者:互联网

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

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

什么是React?

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

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

什么是单页应用程序(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

注意以下几点:

第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的文件夹:

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

function Home(){

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

export default Home;
function About(){

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

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