React 全栈体系（九）

news2024/11/25 1:20:38

第五章 React 路由

一、相关理解

1. SPA 的理解

  • 单页 Web 应用（single page web application，SPA）。
  • 整个应用只有一个完整的页面。
  • 点击页面中的链接不会刷新页面，只会做页面的局部更新。
  • 数据都需要通过 ajax 请求获取, 并在前端异步展现。

2. 路由的理解

2.1 什么是路由?

  • 一个路由就是一个映射关系(key:value)
  • key 为路径, value 可能是 function 或 component

2.2 路由分类

2.2.1 后端路由
  • 理解： value 是 function, 用来处理客户端提交的请求。
  • 注册路由： router.get(path, function(req, res))
  • 工作过程：当 node 接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
2.2.2 前端路由
  • 浏览器端路由，value 是 component，用于展示页面内容。
  • 注册路由: <Route path=“/test” component={Test}>
  • 工作过程：当浏览器的 path 变为/test 时, 当前路由组件就会变为 Test 组件

3. react-router-dom 的理解

  • react 的一个插件库。
  • 专门用来实现一个 SPA 应用。
  • 基于 react 的项目基本都会用到此库。

二、react-router-dom 相关 API

1. 内置组件

  • <BrowserRouter>
  • <HashRouter>
  • <Route>
  • <Redirect>
  • <Link>
  • <NavLink>
  • <Switch>

2. 其它

  • history 对象
  • match 对象
  • withRouter 函数

三、基本路由使用

1. 效果

请添加图片描述
请添加图片描述

2. 准备

2.1 下载 react-router-dom

  • npm install --save react-router-dom

2.2 引入 bootstrap.css:

  • <link rel=“stylesheet” href=“/css/bootstrap.css”>

2.3 注意

  • 由于 react-router-dom 在 2021 年 11 月份升级到了 6 版本，此处是 5 版本的代码展示，需要执行：
npm i react-router-dom@5
  • 最新的 6 版本使用会在后续更新

3. 代码 - 路由的基本使用

3.1 index.js

/* src/index.js */
//引入react核心库
import React from "react";
//引入ReactDOM
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
//引入App组件
import App from "./App";

//渲染App到页面
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

3.2 App

/* src/App.jsx */
import React, { Component } from "react";
import { Link, Route } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <div className="page-header">
              <h2>React Router Demo</h2>
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              {/* 原生html中，靠<a>跳转不同的页面 */}
              {/* <a className="list-group-item active" href="./about.html">
                About
              </a>
              <a className="list-group-item" href="./home.html">
                Home
              </a> */}
              {/* 在React中靠路由链接实现切换组件 -- 编写路由链接 */}
              <Link className="list-group-item" to="/about">
                About
              </Link>
              <Link className="list-group-item" to="/home">
                Home
              </Link>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由 */}
                <Route path="/about" component={About} />
                <Route path="/home" component={Home} />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

3.3 Home

/* src/components/Home/index.jsx */
import React, { Component } from 'react'

export default class index extends Component {
  render() {
    return (
        <h3>我是Home的内容</h3>
    )
  }
}

3.4 About

/* src/components/About/index.jsx */
import React, { Component } from 'react'

export default class index extends Component {
  render() {
    return (
      <h3>我是About的内容</h3>
    )
  }
}

3.5 总结

1.明确好界面中的导航区、展示区
2.导航区的a标签改为Link标签
	<Link to="/xxxxx">Demo</Link>
3.展示区写Route标签进行路径的匹配
	<Route path='/xxxx' component={Demo}/>
4.<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>

4. 代码 - 路由组件与一般组件

4.1 App

/* src/App.jsx */
import React, { Component } from "react";
import { Link, Route } from "react-router-dom";
import Home from "./pages/Home";  //Home是路由组件
import About from "./pages/About";  //About是路由组件
import Header from "./components/Header"; //Header是一般组件

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <Header/>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              <Link className="list-group-item" to="/about">
                About
              </Link>
              <Link className="list-group-item" to="/home">
                Home
              </Link>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由 */}
                <Route path="/about" component={About} />
                <Route path="/home" component={Home} />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

4.2 Header

/* src/components/Header/index.jsx */
import React, { Component } from "react";

export default class index extends Component {
  render() {
    return (
      <div className="page-header">
        <h2>React Router Demo</h2>
      </div>
    );
  }
}

4.3 About

/* src/pages/About/index.jsx */
import React, { Component } from 'react'

export default class index extends Component {
  render() {
    console.log('About组件收到的props是', this.props);
    return (
      <h3>我是About的内容</h3>
    )
  }
}

请添加图片描述

4.4 总结

1.写法不同：
	一般组件：<Demo/>
	路由组件：<Route path="/demo" component={Demo}/>
2.存放位置不同：
	一般组件：components
	路由组件：pages
3.接收到的props不同：
	一般组件：写组件标签时传递了什么，就能收到什么
	路由组件：接收到三个固定的属性
		history:
					go: ƒ go(n)
					goBack: ƒ goBack()
					goForward: ƒ goForward()
					push: ƒ push(path, state)
					replace: ƒ replace(path, state)
		location:
					pathname: "/about"
					search: ""
					state: undefined
		match:
					params: {}
					path: "/about"
					url: "/about"

5. 代码 - NavLink 的使用

5.1 App

/* src/App.jsx */
import React, { Component } from "react";
import { Route } from "react-router-dom";
import Home from "./pages/Home";  //Home是路由组件
import About from "./pages/About";  //About是路由组件
import Header from "./components/Header"; //Header是一般组件

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <Header/>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              <NavLink activeClassName="alex" className="list-group-item" to="/about">
                About
              </NavLink>
              <NavLink activeClassName="alex" className="list-group-item" to="/home">
                Home
              </NavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由 */}
                <Route path="/about" component={About} />
                <Route path="/home" component={Home} />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

5.2 index.html

<!-- public/index.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>React App</title>
		<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
		<link rel="stylesheet" href="/css/bootstrap.css">
		<style>
			.alex{
				background-color: rgb(209, 137, 4) !important;
				color: white !important;
			}
		</style>
	</head>
	<body>
		<div id="root"></div>
	</body>
</html>

请添加图片描述

6. 代码 - 封装 NavLink 组件

6.1 App

/* src/App.jsx */
import React, { Component } from "react";
import { NavLink, Route } from "react-router-dom";
import Home from "./pages/Home";  //Home是路由组件
import About from "./pages/About";  //About是路由组件
import Header from "./components/Header"; //Header是一般组件
import MyNavLink from "./components/MyNavLink";

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <Header/>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              {/* 在React中靠路由链接实现切换组件 -- 编写路由链接 */}
              <MyNavLink to="/about">About</MyNavLink>
              <MyNavLink to="/home">Home</MyNavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由 */}
                <Route path="/about" component={About} />
                <Route path="/home" component={Home} />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

6.2 MyNavLink

/* src/components/MyNavLink/index.jsx */
import React, { Component } from "react";
import { NavLink } from "react-router-dom";

export default class MyNavLink extends Component {
  render() {
    return (
      <NavLink activeClassName="alex" className="list-group-item" {...this.props}/>
    );
  }
}

6.3 总结

1.NavLink可以实现路由链接的高亮，通过activeClassName指定样式名
2.标签体内容是一个特殊的标签属性
3.通过this.props.children可以获取标签体内容

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1024254.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

软考 -- 计算机学习(2)

软考 -- 计算机学习(2)

文章目录 一、安全性知识1.1 信息安全和信息系统安全1.2 信息安全技术1.3 网络安全技术 二、多媒体技术三、软件工程基础知识3.1 信息系统生命周期3.2 软件过程模型3.3 信息系统开发方法3.4 系统分析和设计概述3.5 结构化开发方法3.6 系统运行与维护 四、项目管理4.1 进度管理4…
阅读更多...
（避开网上复制操作）最详细的树莓派刷机配置（含IP固定、更改国内源的避坑操作、SSH网络登录、VNC远程桌面登录）

（避开网上复制操作）最详细的树莓派刷机配置（含IP固定、更改国内源的避坑操作、SSH网络登录、VNC远程桌面登录）

一、准备工作 SD卡格式化 二、 树莓派系统环境搭建&#xff08;官方&#xff09; 官方镜像 1.1、 必备的配件 读卡器&#xff0c; 内存卡&#xff08;强烈推荐 32GB 内存卡&#xff0c; #lite 命令行界面版本至少需要 8G&#xff0c; 图形化带桌面版镜像需要 16GB&#xf…
阅读更多...
Java之异常的详细解析

Java之异常的详细解析

1. 异常 1.1 异常概念 异常&#xff0c;就是不正常的意思。在生活中:医生说,你的身体某个部位有异常,该部位和正常相比有点不同,该部位的功能将受影响.在程序中的意思就是&#xff1a; 异常 &#xff1a;指的是程序在执行过程中&#xff0c;出现的非正常的情况&#xff0c;最…
阅读更多...
web自动化jenkins+git+allure

web自动化jenkins+git+allure

jenkins -- 持续集成平台 -- 持续集成的场景 -- 【持续】【集成】自动执行你的任务 --- 定时任务 -- 结果通知 -- 报告展示安装jenkins --- http://testingpai.com/article/16092251322041、工作空间 - jenkins的工作空间job任务的工作空间 -- 给任务存放数据/资料 -- 生成的…
阅读更多...
闭着眼睛安装Neoj4版本（5.12.0 Community windows）

闭着眼睛安装Neoj4版本（5.12.0 Community windows）

1.安装 Java SE 17.0.5 &#xff08;及以上&#xff0c;建议和我一样&#xff09;&#xff0c;安装完配置环境变量&#xff0c;成功标志&#xff08;cmd输出java -version的内容&#xff09; 1.上Neo4j Download Center - Graph Database & Analytics 3. 4.进入cmd &#…
阅读更多...
tcpdump常用命令

tcpdump常用命令

需要安装 tcpdump wireshark ifconfig找到网卡名称 eth0, ens192... tcpdump需要root权限 网卡eth0 经过221.231.92.240:80的流量写入到http.cap tcpdump -i eth0 host 221.231.92.240 and port 80 -vvv -w http.cap ssh登录到主机查看排除ssh 22端口的报文 tcpdump -i …
阅读更多...
Java拓展——常见数据结构（数组，栈，链表，树，图）

Java拓展——常见数据结构（数组，栈，链表，树，图）

Java基础11——数据结构 文章目录 Java基础11——数据结构数据结构常见的数据结构数组栈栈简介如何创建一个类实现栈的功能？**栈使用场景**队列队列简介如何实现？**队列分类**链表**单链表****循环链表****双向链表****双向循环链表****链表使用场景****数组** **vs** **链表…
阅读更多...
听GPT 讲Istio源代码--cni

听GPT 讲Istio源代码--cni

在 Istio 项目中&#xff0c; cni: CNI 目录包含了 Istio CNI 插件的相关代码和配置文件。CNI&#xff08;Container Network Interface&#xff09;是一个用于配置容器网络的接口规范。Istio CNI 插件用于将 Istio 的网络功能集成到容器运行时环境中&#xff0c;以便实现对微服…
阅读更多...
Nvidia计算卡扫盲

Nvidia计算卡扫盲

title: Nvidia计算卡扫盲 sidebarDepth: 4 layout: AtmLayout GPU 大的方面来讲&#xff0c; 由显存计算单元组成&#xff1b; 显存 GPU板卡上的DRAM容量大&#xff0c;速度慢&#xff0c;CPU和GPU都可以访问 计算单元 Streaming Multiprocessor,执行计算&#xff0c; 每个…
阅读更多...
【FAQ】安防监控系统/视频云存储/监控平台EasyCVR服务器解释器出现变更该如何修改？

【FAQ】安防监控系统/视频云存储/监控平台EasyCVR服务器解释器出现变更该如何修改？

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…
阅读更多...
开发高性能知识付费平台：关键技术策略

开发高性能知识付费平台：关键技术策略

引言 在构建知识付费平台时&#xff0c;高性能是确保用户满意度和平台成功的关键因素之一。本文将探讨一些关键的技术策略&#xff0c;帮助开发者打造高性能的知识付费平台。 1. 前端性能优化 使用CDN加速资源加载 使用内容分发网络&#xff08;CDN&#xff09;来托管和加…
阅读更多...
解决Office Word另存为PDF卡死的问题

解决Office Word另存为PDF卡死的问题

今天突然间遇到这个问题&#xff0c;在网上找了好久都没有想要的答案。后来一步一步摸索终于找到了问题所在&#xff0c;希望这篇文章能帮助有同样问题的各位&#xff01; 1.问题 当word文件点击另存为PDF格式时&#xff0c;下一刻光标变为加载状态&#xff0c;并且一直在转圈…
阅读更多...
数据结构----链式栈

数据结构----链式栈

目录 前言 链式栈 操作方式 1.存储结构 2.初始化 3.创建节点 4.判断是否满栈 5.判断是否空栈 6.入栈 7.出栈 8.获取栈顶元素 9.遍历栈 10.清空栈 完整代码 前言 前面我们学习过了数组栈的相关方法&#xff0c;&#xff08;链接&#xff1a;线性表-----栈&#xff08;栈…
阅读更多...
【初阶数据结构】——堆的引入和实现二叉树

【初阶数据结构】——堆的引入和实现二叉树

目录 前言 一、二叉树的顺序结构及实现 1.1二叉树的顺序结构 1.2堆的结构 二、堆的实现 2.1堆向上调整算法&#xff08;堆的插入&#xff09; 2.2堆向下调整算法&#xff08;堆的删除&#xff09; 2.3建堆的时间复杂度 2.4堆的创建 2.5堆的初始化和空间的销毁 2.6堆…
阅读更多...
【数据结构】图的基本概念，图的存储结构（邻接矩阵；邻接表；十字链表；邻接多重表）

【数据结构】图的基本概念，图的存储结构（邻接矩阵；邻接表；十字链表；邻接多重表）

欢~迎~光~临~^_^ 目录 1、图的基本概念 2、图的存储结构 2.1邻接矩阵 2.2邻接表 2.3十字链表 2.4邻接多重表 2.5图的四种存储结构的对比 1、图的基本概念 图是由一组节点&#xff08;通常称为顶点&#xff09;和一组连接这些节点的边&#xff08;通常称为边&#xff0…
阅读更多...
注册中心的学习

注册中心的学习

一、什么是注册中心&#xff1f; 注册中心主要有三种角色&#xff1a; 1.1、服务提供者&#xff08;RPC Server&#xff09;&#xff1a; 在启动时&#xff0c;向 Registry 注册自身服务&#xff0c;并向 Registry 定期发送心跳汇报存活状态。 1.2、服务消费者&#xff08;…
阅读更多...
Qt5开发及实例V2.0-第七章-Qt图形视图框架

Qt5开发及实例V2.0-第七章-Qt图形视图框架

Qt5开发及实例V2.0-第七章-Qt图形视图框架 第7章 Qt 5图形视图框架7.1 图形视图体系结构7.1.1 Graphics View的特点7.1.2 Graphics View的三元素7.1.3 GraphicsView的坐标系统 7.2 【实例】&#xff1a;图形视图7.2.1 飞舞的蝴蝶7.2.2 地图浏览器7.2.3 图元创建7.2.4 图元的旋转…
阅读更多...
大数据-kafka学习笔记

大数据-kafka学习笔记

Kafka Kafka 是一个分布式的基于发布/订阅模式的消息队列&#xff08;Message Queue&#xff09;&#xff0c;主要应用于大数据实时处理领域。 Kafka可以用作Flink应用程序的数据源。Flink可以轻松地从一个或多个Kafka主题中消费数据流。这意味着您可以使用Kafka来捕获和传输…
阅读更多...
Python 图形化界面基础篇：创建顶部菜单

Python 图形化界面基础篇：创建顶部菜单

Python 图形化界面基础篇&#xff1a;创建顶部菜单 引言 Tkinter 库简介步骤1&#xff1a;导入 Tkinter 模块步骤2&#xff1a;创建 Tkinter 窗口步骤3&#xff1a;创建顶部菜单栏步骤4&#xff1a;处理菜单项的点击事件步骤5&#xff1a;启动 Tkinter 主事件循环 完整示例代码…
阅读更多...
Python 如何把 String 转换为 Json 对象

Python 如何把 String 转换为 Json 对象

在我们对 JSON 进行处理的时候&#xff0c;大概率我们会需要把字符串转换为 JSON 对象后才能进行处理。 Python 贴心的使用 json.loads(employee_string)就可以了。 首先需要做的就是导入 JSON 库。 #include json library import json 对现代程序员来说&#xff0c;JSON …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023