React 全栈体系（九）

2023-09-20 00:11:09

第五章 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可以获取标签体内容
更多推荐

基於RISC-V QEMU 仿真運行Linux 系統環境搭建

前言文章詳細說明如何從堶零開始基於RISC-VQEMU仿真運行Linux系統環境搭建,是Linux小白入門教程不二之選,歡迎留言討論,轉發請注明原文出處~1.準備QEMU仿真環境--RISC-V64bits安裝包下載地址:https://www.qemu.org/安裝命令及安裝成功效果如下所示,target-list設

RabbitMQ常见的应用问题

文章目录1.消息可靠性保障2.消息的幂等性保障1.消息可靠性保障在实际生产环境中，可能会由于网络问题导致消息接收异常产生某种影响，基于这种情况我们需要保障消息的可靠性。RabbitMQ中的消息可靠性也称为消息补偿，如下图所示，可以保证消息的可靠性。分为9种种步骤实现消息补偿1、生产者处理业务逻辑，将数据写入到数据库。2

【云原生】kubernetes应用程序包管理工具Helm

Helm什么是Helm安装Helm重要概念使用Helm1简介官网地址:HelmHelm是一个Kubernetes应用程序包管理工具，它允许你轻松管理和部署Kubernetes应用程序。Helm通过使用称为Charts的预定义模板来简化Kubernetes应用程序的部署和管理。Chart包含了一组Kubernetes对象

【云原生 | 58】Docker三剑客之Docker Swarm中的调度器

🍁博主简介：🏅云计算领域优质创作者🏅2022年CSDN新星计划python赛道第一名🏅2022年CSDN原力计划优质作者🏅阿里云ACE认证高级工程师🏅阿里云开发者社区专家博主💊交流社区：CSDN云计算交流社区欢迎您的加入！目录1、spread调度策略2、binpack调度策略👑👑👑结束语👑👑👑

[Django-1] 快速建立项目

初始化Django初始化项目创建app项目和app的关系下面的代码一般放在view.py中项目启动项目中中的urls.py和app中的urls.py的关系ModelDjango生成表查询理解初始化项目python-mpipinstallDjangocd到想要创建项目的目录django-adminstartproject

【云原生之Docker实战】使用Docker部署flatnotes笔记工具

【云原生之Docker实战】使用Docker部署flatnotes笔记工具一、flatnotes介绍1.1flatnotes简介1.2flatnotes特点二、本地环境介绍2.1本地环境规划2.2本次实践介绍三、本地环境检查3.1检查Docker服务状态3.2检查Docker版本3.3检查dockercompose版本

036：vue导出页面生成pdf文件

第036个查看专栏目录:VUE------elementUI专栏目标在vue和elementUI联合技术栈的操控下，本专栏提供行之有效的源代码示例和信息点介绍，做到灵活运用。（1）提供vue2的一些基本操作：安装、引用，模板使用，computed，watch，生命周期(beforeCreate，created,befo

Hadoop sqoop

0目录1.安装sqoop2.补充sqoop流程1.安装sqoop解压、改名[root@kb129install]#tar-xvf./sqoop-1.4.7.tar.gz-C/opt/soft/[root@kb129soft]#mvsqoop-1.4.7/sqoop147拷贝配置文件[root@kb129conf]#pw

[k8s] kubectl port-forward 和kubectl expose的区别

kubectlport-forward和kubectlexpose是Kubernetes命令行工具kubectl提供的两种不同方式来公开服务。kubectlport-forwardkubectlport-forward命令用于在本地主机和集群内部的Pod之间建立一个临时的端口转发通道。该命令将本地机器上的一个端口绑定到

DVWA靶机，通过XSS盗取cookie登录

文章目录一发现XSS漏洞1.1登录DVWA，找到XSS（DOM）模块，测试XSS是否存在。1.2在选项的传参后面加入一串js代码，也就是可以XSS弹出的代码。payload如下：二、盗取cookie2.1在XSS平台上搭建一个测试项目。这里用的是免费的XSS平台：选择【我的项目】->【创建】，创建一个测试项目：2.2配

Java高级-注解

注解1.介绍2.元注解3.注解的解析4.注解的应用场景1.介绍注解Annotation就是Java代码里的特殊标记，作用是让其他程序根据注解信息来决定什么是执行该程序注解：注解可以在类上、构造器上、方法上、成员变量上、参数上等位置自定义注解/***自定义注解*/public@interfaceMyTest1{Strin

热文推荐
  1. Mysql的常见错误总结

    Mysql的常见错误总结Datatruncation:Outofrangevalueofforcolumn在执行一个update语句的时候，报错Datatruncation:Outofrangevalueofforcolumn‘CLAIM_QUANTITY’…update语句是把’CLAIM_QUANTITY’这个字段

  2. 使用Python编写一个多线程的12306抢票程序

    国庆长假即将到来，大家纷纷计划着自己的旅行行程。然而，对于很多人来说，抢购火车票人们成了一个令人头疼的问题。12306网站的服务器经常因为流量高而崩溃，导致抢票变得越来越严重异常困难。首先，让我们来了解一下12306抢票的难点。由于很多人都在同一时间段内访问12306网站，服务器的负载率非常高，导致网站响应变慢甚至崩溃

  3. 【uniapp】小程序开发：3 分包配置

    分包加载配置，此配置为小程序的分包加载机制。因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。所谓的主包，即放置默认启动页面/TabBar页面，以及一些所有分包都需用到公共资源/JS脚本；而分包则是根据pages.json的配置进行划分。在小程序启动时，默认会下载主包并启动主包内页

  4. ReactNative 网络库

    WhatJS判断网络状态不准确react-native-netinfo在Android中的结构type-CellularGeneration：G网模式枚举type-ConnectionType：网络连接类型AmazonFireDeviceConnectivityPoller：Amazon设备网络适配，可忽略Broadc

  5. 字符串函数和内存函数详解（2）

    🐵本文会将会对剩余的字符串库函数和内存函数进行讲解1.strstr📚1.1函数用法✏️strstr函数原型：strstr用于在字符串中找子串，strstr会返回str1中出现str2的起始地址，如果在str1中没有找到str2，则返回空指针1.2具体实现🖊️#include<stdio.h>#include<st

  6. 秋招如何做好IT面试准备

    一年一季又是到了秋招的日子，回首去年这时候的自己也在准备面试中苦苦挣扎，在这里给各位学弟学妹分享一些面试准备的小技巧吧。方向一：分享你面试IT公司的小技巧IT公司区别与其他公司肯定对技术要求更高，所以首先你要准备的是你简历上写的东西你是否都能回答的上，因为大部分公司面试第一出发点都是你的简历，不要在简历上胡吹海侃给自己

  7. 视觉Transformer在低级视觉领域的研究综述

    视觉Transfomer的基本原理在图像处理过程中，ViT首先将输入的图片分成块，对其进行线性的编码映射后排列成一堆的向量作为编码器的输入，在分类任务中会在这个一维向量加入了一个可学习的嵌入向量用作分类的类别预测结果表示，最后通过一个全连接层输出结果注意力机制注意力机制让网络更聚焦于输入中相关信息的方法，从而减少对无关

  8. 实时云渲染与直播应用场景结合技术探索

    //随着互联网以及终端设备的全面发展，直播在日常的生活中已经越来越常见。越来越多的人开始在直播中与主播互动，作为一种娱乐消遣的方式。但是有些直播平台频发的卡顿以及打赏特效的单一会让用户的直播体验大打折扣。LiveVideoStack邀请到腾讯云的江敏为我们介绍腾讯云如何将云渲染应用在直播场景中，为直播带来更好的体验。文

  9. 前端中blob文件流和base64的区别

    在前端中，base64和fileBlob是用于处理文件数据的两种不同方式。1.Base64编码Base64是一种将二进制数据转换为文本字符串的编码方式。它将文件数据转换为一串由ASCII字符组成的字符串。在前端中，可以使用JavaScript的btoa()和atob()函数来进行Base64编码和解码。优点：-Base