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.mzph.cn/news/82893.shtml

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

相关文章

el-select 下拉框全选、多选的几种方式组件

el-select 下拉框全选、多选的几种方式组件

组件一、基础多选 适用性较广的基础多选&#xff0c;用 Tag 展示已选项 <template><el-select v-model"value1" multiple placeholder"请选择"><el-optionv-for"item in options":key"item.value":label"item.la…
阅读更多...
基于SpringBoot+Vue的宠物领养饲养交流管理平台设计与实现

基于SpringBoot+Vue的宠物领养饲养交流管理平台设计与实现

前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&#xff0c;博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f447;&#x1f3fb;…
阅读更多...
vue3+TS前端JS实现 搜索关键词变红

vue3+TS前端JS实现 搜索关键词变红

起初在网上搜索获得的处理方式大都是类似这种&#xff1a; 但是实际使用中发现&#xff0c;对于汉字和数字是没有问题的&#xff0c;但是如果有字母就会出现问题。 1.只有汉字和数字的时候&#xff1a;匹配正常。 2.当有字母的时候&#xff1a;异常替换。 原因&#xff1a;第二…
阅读更多...
TuyaLink 快速入门教程

TuyaLink 快速入门教程

通过本入门教程&#xff0c;大家能了解到如何在涂鸦 IoT 开发平台上使用 TuyaLink 完成智能设备接入。并通过 Java 程序&#xff0c;在 IntelliJ IDEA 中使用 TuyaLink 的 GitHub Demo 工程&#xff0c;对一个电工开关设备&#xff0c;实现基本的数据上报下发功能。 准备工作 …
阅读更多...
测试与FastAPI应用数据之间的差异

测试与FastAPI应用数据之间的差异

【squids.cn】 全网zui低价RDS&#xff0c;免费的迁移工具DBMotion、数据库备份工具DBTwin、SQL开发工具等 当使用两个不同的异步会话来测试FastAPI应用程序与数据库的连接时&#xff0c;可能会出现以下错误&#xff1a; 在测试中&#xff0c;在数据库中创建了一个对象&#x…
阅读更多...
QT记事本+登陆界面的简单实现

QT记事本+登陆界面的简单实现

主体头文件 #ifndef JSB_H #define JSB_H#include <QMainWindow> #include <QMenuBar>//菜单栏 #include <QToolBar>//工具栏 #include <QStatusBar>//状态栏 #include <QTextEdit>//文本 #include <QLabel>//标签 #include <QDebug&g…
阅读更多...
Golang gorm 一对一关系

Golang gorm 一对一关系

一对一关系 一对一关系比较少&#xff0c;一般用于表的扩展例如一张用户表&#xff0c;有很多字段那么就可以把它拆分为两张表&#xff0c;常用的字段放主表&#xff0c;不常用的字段放详情表。 针对用户表来说可以通过user去点出userinfo。 创建表和插入数据 package mainimp…
阅读更多...
纯js实现html指定页面导出word

纯js实现html指定页面导出word

因为最近做了范文网站需要&#xff0c;所以要下载为word文档&#xff0c;如果php进行处理&#xff0c;很吃后台服务器&#xff0c;所以想用前端进行实现。查询github发现&#xff0c;确实有这方面的插件。 js导出word文档所需要的两个插件&#xff1a; FileSaver.js jquery.w…
阅读更多...
【AI视野·今日NLP 自然语言处理论文速览 第三十六期】Tue, 19 Sep 2023

【AI视野·今日NLP 自然语言处理论文速览 第三十六期】Tue, 19 Sep 2023

AI视野今日CS.NLP 自然语言处理论文速览 Tue, 19 Sep 2023 (showing first 100 of 106 entries) Totally 106 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers Speaker attribution in German parliamentary debates with QLoRA-ada…
阅读更多...
如何理解高效IO

如何理解高效IO

目录 前言 1.如何理解高效的IO 2.五种IO模型 3.非阻塞IO 4.非阻塞代码编写 总结 前言 哈喽&#xff0c;很高兴和大家见面&#xff01;今天我们要介绍的关于IO的话题&#xff0c;在计算机中IO是非常常规的操作&#xff0c;例如将数据显示到外设&#xff0c;或者将数据从主…
阅读更多...
【LeetCode75】第五十九题 第N个泰波那契数

【LeetCode75】第五十九题 第N个泰波那契数

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 题目顾名思义&#xff0c;让我们求出第N个泰波那契数&#xff0c;也就是除了开头三个数之外&#xff0c;第四个数开始就是等于前三个数之…
阅读更多...
基于 Alpine 环境构建 aspnetcore6-runtime 的 Docker 镜像

基于 Alpine 环境构建 aspnetcore6-runtime 的 Docker 镜像

关于 Alpine Linux 此处就不再过多讲述&#xff0c;请自行查看相关文档。 .NET 支持的体系结构 下表列出了当前支持的 .NET 体系结构以及支持它们的 Alpine 版本。 这些版本在 .NET 到达支持终止日期或 Alpine 的体系结构受支持之前仍受支持。请注意&#xff0c;Microsoft 仅正…
阅读更多...
Jenkins+Gitee+Docker+Ruoyi项目前后端分离部署

Jenkins+Gitee+Docker+Ruoyi项目前后端分离部署

前言 描述&#xff1a;本文主要是用来记录 如何用标题上的技术&#xff0c;部署到云服务器上通过ip正常访问。 一、总览 1.1、Docker做的事 拉取 mysql 镜像拉取 redis 镜像拉取 jdk 镜像拉取 nginx 镜像 解释说明&#xff1a;前端项目的打包文件放在 nginx容器运行。后端…
阅读更多...
PWMADC重要参数

PWMADC重要参数

频率的计算 1、 ARR&#xff08;TIM_Period&#xff09; 是计数值&#xff1b; 2、 PSC&#xff08;TIM_Prescaler&#xff09; 是预分频值。 频率计算公式&#xff1a;Fpwm 主频 / ((ARR1)*(PSC1))(单位&#xff1a;Hz) 占空比的计算 计算公式&#xff1a;duty circle TIM3…
阅读更多...
部署大数据平台详细教程以及遇到的问题解答（ubuntu18.04下安装ambari2.7.3+HDP3.1.0）

部署大数据平台详细教程以及遇到的问题解答（ubuntu18.04下安装ambari2.7.3+HDP3.1.0）

节点准备： 我搭建的是3台，节点可以随意。建议最少是3台 hostname ip 角色 ubuntu-1804-1 172.21.73.53 从节点 ubuntu-1804-2 172.21.73.54 主节点 ubuntu-1804-3 172.21.73.55 从节点 一：关闭所有节点的防火墙 sudo ufw disable二：配置时钟同步NTP 所有节点安装ntp sud…
阅读更多...
Lua学习笔记：探究package

Lua学习笔记：探究package

前言 本篇在讲什么 理解Lua的package 本篇需要什么 对Lua语法有简单认知 对C语法有简单认知 依赖Visual Studio工具 本篇的特色 具有全流程的图文教学 重实践&#xff0c;轻理论&#xff0c;快速上手 提供全流程的源码内容 ★提高阅读体验★ &#x1f449; ♠ 一级…
阅读更多...
腾讯云微服务平台 TSF 异地多活单元化能力重磅升级

腾讯云微服务平台 TSF 异地多活单元化能力重磅升级

导语 2023腾讯全球数字生态大会已于9月7-8日完美落幕&#xff0c;40专场活动展示了腾讯最新的前沿技术、核心产品、解决方案。 微服务与消息队列专场&#xff0c;腾讯云微服务平台 TSF 产品经理张桢带来了《腾讯云微服务平台 TSF 异地多活单元化能力重磅升级》的精彩演讲。本…
阅读更多...
Unity的配置文件在安卓路径下使用的方法

Unity的配置文件在安卓路径下使用的方法

Unity的配置文件在安卓路径下使用的方法 前言 之前我做过的很多使用配置文件的Unity项目&#xff0c;后面的有些项目也有在安卓路径下读取json文件的需求。这几天有个需求是获取在安卓路径下配置文件里的数据&#xff0c;我在网上查了一些案例&#xff0c;简单实现了这个需求…
阅读更多...
内网穿透的应用-Cloudreve搭建云盘系统，并实现随时访问

内网穿透的应用-Cloudreve搭建云盘系统，并实现随时访问

文章目录 1、前言2、本地网站搭建2.1 环境使用2.2 支持组件选择2.3 网页安装2.4 测试和使用2.5 问题解决 3、本地网页发布3.1 cpolar云端设置3.2 cpolar本地设置 4、公网访问测试5、结语 1、前言 自云存储概念兴起已经有段时间了&#xff0c;各互联网大厂也纷纷加入战局&#…
阅读更多...
小样本目标检测：ECEA: Extensible Co-Existing Attention for Few-Shot Object Detection

小样本目标检测：ECEA: Extensible Co-Existing Attention for Few-Shot Object Detection

论文作者&#xff1a;Zhimeng Xin,Tianxu Wu,Shiming Chen,Yixiong Zou,Ling Shao,Xinge You 作者单位&#xff1a;Huazhong University of Science and Technology; UCAS-Terminus AI Lab 论文链接&#xff1a;http://arxiv.org/abs/2309.08196v1 内容简介&#xff1a; 1&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023