React 全栈体系（九）

第五章 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: undefinedmatch: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.xdnf.cn/news/140096.html

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

相关文章

蓝桥杯 题库 简单 每日十题 day7

蓝桥杯 题库 简单 每日十题 day7

01 啤酒和饮料 题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。啤酒每罐2.3元&#xff0c;饮料每罐1.9元。小明买了若干啤酒和饮料&#xff0c;一共花了82.3元。我们还知道他买的啤酒比饮料的数量少&#xff0c;请你…
阅读更多...
5.2 磁盘CRC32完整性检测

5.2 磁盘CRC32完整性检测

CRC校验技术是用于检测数据传输或存储过程中是否出现了错误的一种方法&#xff0c;校验算法可以通过计算应用与数据的循环冗余校验&#xff08;CRC&#xff09;检验值来检测任何数据损坏。通过运用本校验技术我们可以实现对特定内存区域以及磁盘文件进行完整性检测&#xff0c;…
阅读更多...
【Java Web】CSS

【Java Web】CSS

目录 1.CSS(Cascading Style Sheets) 层叠样式表 2.标签 1.注释 2.三种书写样式 1.内部样式 2.内联样式 3.外部样式 3.CSS选择器 &#xff08;1&#xff09;标签选择器 &#xff08;2&#xff09;类选择器 &#xff08;3&#xff09;ID选择器 复合选择器 &#xf…
阅读更多...
Latex字体大小

Latex字体大小

阅读更多...
网络知识——局域网和交换机

网络知识——局域网和交换机

定义&#xff1a; 局域网&#xff08;Local Area Network&#xff0c;简称LAN&#xff09;是指在某一区域内由多台计算机互联成的计算机组。广域网&#xff08;Wide Area Network&#xff0c;简称WAN&#xff09;是指跨越单个建筑物或大型园区&#xff0c;连接分布在特定地理区…
阅读更多...
MongoDB的搭建 和crud操作

MongoDB的搭建 和crud操作

MongoDB docker 下载 docker run --restartalways -d --name mongo -v /docker/mongodb/data:/data/db -p 27017:27017 mongo:4.0.6使用navcat工具使用MongoDB Crud操作 jar包 <dependency><groupId>org.projectlombok</groupId><artifactId>lom…
阅读更多...
AP5193 DC-DC恒流转换器 消防应急 灯汽车灯 应急日光灯太阳能灯驱动IC

AP5193 DC-DC恒流转换器 消防应急 灯汽车灯 应急日光灯太阳能灯驱动IC

AP5193是一款PWM工作模式,高效率、外围简单、 内置功率MOS管&#xff0c;适用于4.5-100V输入的高精度 降压LED恒流驱动芯片。电流2.5A。AP5193可实现线性调光和PWM调光&#xff0c;线性调光 脚有效电压范围0.55-2.6V. AP5193 工作频率可以通过RT 外部电阻编程来设定&#xff0c…
阅读更多...
postman发送图片

postman发送图片

POSTMAN 如何发送携带图片的请求? 闲话不叙 步骤如下&#xff1a; 新建一个请求&#xff0c;在Headers中添加一对k-v : Content-Type > multipart/form-data 请求的接口: RequestMapping("/fileUploadController")public String fileUpload(MultipartFile fil…
阅读更多...
【每日一题】1539. 第 k 个缺失的正整数

【每日一题】1539. 第 k 个缺失的正整数

1539. 第 k 个缺失的正整数 - 力扣&#xff08;LeetCode&#xff09; 给你一个 严格升序排列 的正整数数组 arr 和一个整数 k 。 请你找到这个数组里第 k 个缺失的正整数。 示例 1&#xff1a; 输入&#xff1a;arr [2,3,4,7,11], k 5 输出&#xff1a;9 解释&#xff1a;缺失…
阅读更多...
【刷题-牛客】链表内指定区间反转

【刷题-牛客】链表内指定区间反转

链表定区间翻转链表 题目链接题目描述核心思想详细图解代码实现复杂度分析 题目链接 链表内指定区间反转_牛客题霸_牛客网 (nowcoder.com) 题目描述 核心思想 遍历链表的过程中在进行原地翻转 [m,n]翻转区间记作子链表,找到子链表的 起始节点 left 和 终止节点 right记录在…
阅读更多...
基于Qt实现的可视化大屏监控

基于Qt实现的可视化大屏监控

基于Qt实现的可视化大屏监控 先上图 基于Qt实现的可视化大屏监控 总有人质疑QWidget实现不了炫酷的界面&#xff0c;其实QWidget已经很强大了&#xff0c;虽然很多效果没有现成的框架&#xff0c;所以比不上html5或者安卓这种&#xff0c;但是也能实现很多不错的效果了&#…
阅读更多...
Jetpack Compose干货，如何让Compose Dialog从屏幕任意方向进入

Jetpack Compose干货，如何让Compose Dialog从屏幕任意方向进入

一、前言 来个效果图&#xff0c;基于Compose Dialog&#xff0c;最终要实现的库能力如下&#xff1a; 这里使用的是这个包下面的&#xff1a; androidx.compose.ui.window.Dialog androidx.compose.material3.AlertDialog它内部调用的也是androidx.compose.ui.window.Dialog …
阅读更多...
Android开源 日志框架 LogDog V2.3.1

Android开源 日志框架 LogDog V2.3.1

目录 一、简介 二、下载使用 添加jitpack 仓库 添加依赖: 三、更改 1、 LogDogV2.3.1初始化: 2、通过上面的初始化 &#xff0c;已经知道IJsonEngine 优化了泛型参数&#xff0c;采用 Object/Any 3、优化空异常的判断&#xff0c;哪怕打印变量是NULL LogDog会打印“nul…
阅读更多...
Activiti7工作流 二【Activiti7入门、Activiti7进阶】

Activiti7工作流 二【Activiti7入门、Activiti7进阶】

文章目录 六、Activiti7入门6.1 业务流程建模6.1.1 绘制流程图6.1.2 指定任务负责人6.1.3 生成png格式流程图 6.2 部署流程定义6.3 启动流程实例6.4 任务查询6.5 任务处理6.6 添加审批意见6.6 查看历史审批 七、Activiti7进阶7.1 流程定义相关7.1.1 流程定义查询7.1.2 流程资源…
阅读更多...
有哪些好用的上网行为管理软件?（上网行为管理软件功能好的软件推荐）

有哪些好用的上网行为管理软件?（上网行为管理软件功能好的软件推荐）

随着互联网的快速发展&#xff0c;企业的信息化管理和员工的上网行为已经成为企业信息化建设的重要组成部分。上网行为管理软件作为一种新型的管理工具&#xff0c;可以帮助企业实现对员工上网行为的管控和优化&#xff0c;进而提高企业的工作效率和网络安全。本文将对多款市场…
阅读更多...
minio文件上传

minio文件上传

1.代码 大佬仓库&#xff1a;https://gitee.com/Gary2016/minio-upload?_fromgitee_search 关于这个代码的讲解&#xff1a;来自b站 2.准备minio 参考&#xff1a;[1]、[2] 2.1 下载 官网&#xff1a;https://min.io/download#/windows 2.2 启动 ①准备一个data文件夹…
阅读更多...
树、二叉树、堆及其应用（堆排序、top-k问题）

树、二叉树、堆及其应用（堆排序、top-k问题）

目录 树的概念与结构 概念&#xff1a; 与树相关的概念: 树的表示&#xff1a; 二叉树 概念&#xff1a; 特殊的二叉树&#xff1a; 二叉树性质&#xff1a; 二叉树的存储结构&#xff1a; 堆 堆的概念: 堆的实现&#xff1a; 堆的创建&#xff1a; 堆的插入&#xff1a; 堆的删…
阅读更多...
【算法思想-排序】排序数组-力扣 912 题

【算法思想-排序】排序数组-力扣 912 题

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…
阅读更多...
OJ练习第180题——颠倒二进制位

OJ练习第180题——颠倒二进制位

颠倒二进制位 力扣链接&#xff1a;190. 颠倒二进制位 题目描述 颠倒给定的 32 位无符号整数的二进制位。 提示&#xff1a; 请注意&#xff0c;在某些语言&#xff08;如 Java&#xff09;中&#xff0c;没有无符号整数类型。在这种情况下&#xff0c;输入和输出都将被指…
阅读更多...
2023华为杯数学建模研赛E题全解析

2023华为杯数学建模研赛E题全解析

2023华为杯数学建模研赛E题解析&#xff0c;完整版已出!!! 包含所有模型、代码、结果&#xff0c;39页技术文档&#xff0c;详细内容如下! 免费版链接已放在下面&#xff0c;需要的同学可以直接自取~ 【云顶数模】2023研究生数学建模免费链接&#xff1a; https://pan.baid…
阅读更多...
最新文章

Copyright @ 2022~2023