• 一、【React-Router5】React路由简介

    文章目录

    1、SPA

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

    2、路由的理解

    2.1、什么是路由?

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

    2.2、路由分类

    1. 后端路由（后端工程师实现，不幸的是小白是全栈工程师。。。）
      1. 理解： value是function, 用来处理客户端提交的请求
      2. 注册路由： router.get(path, function(req, res))
      3. 工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
    2. 前端路由（前端工程师实现）
      1. 浏览器端路由，value是component，用于展示页面内容。
      2. 注册路由:
      3. 工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

    3、前端路由的基石 history.js

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>前端路由的基石_historytitle>
head>
<body>
	<a href="http://www.atguigu.com" onclick="return push('/test1') ">push test1a><br><br>
	<button onClick="push('/test2')">push test2button><br><br>
	<button onClick="replace('/test3')">replace test3button><br><br>
	<button onClick="back()"><= 回退button>
	<button onClick="forword()">前进 =>button>

	<script type="text/javascript" src="https://cdn.bootcss.com/history/4.7.2/history.js">script>
	<script type="text/javascript">
        // 方法一，直接使用H5推出的history身上的API
		// let history = History.createBrowserHistory()
        
        // 方法二，hash值（锚点）
		let history = History.createHashHistory()

        // 压栈
		function push (path) {
			history.push(path)
			return false
		}

        // 替换
		function replace (path) {
			history.replace(path)
		}

        // 回退
		function back() {
			history.goBack()
		}

        // 向前
		function forword() {
			history.goForward()
		}

        // 监听
		history.listen(location => console.log('请求路由路径变化了', location) )
	script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47

    3、react-router-dom

    使用路由需要引入react的一个插件库：react-router-dom，专门用来实现一个SPA应用，基于react的项目基本都会用到此库。

    安装指令：yarn add react-router-dom@5

    由于小白使用yarn安装报了奇怪的错误，使用npm能正常安装，npm安装指令：npm install react-router-dom@5

    点击访问 印记中文 - React-Router 中文文档（初学不建议直接阅读）

    3.1、内置组件

    3.2、其它

    1. history 对象

    2. match 对象

    3. withRouter 函数

  • 相关阅读:
    读书笔记：《量化投资实务》
    Android多线程和线程池
    OpenFeign服务接口调用
    MySQL之优化服务器设置(六)
    关于系统超时设置，简单聊一聊
    大数据-Hadoop-基础篇-第九章-Storm
    Vue---监听div元素宽高改变时echart图表重新resize
    Revit的链接文件随同主文件导出到navisworks的设置方法？
    parallelStream并行流性能
    laravel9 from验证，中文提示
  • 原文地址：https://blog.csdn.net/qq_30769437/article/details/128091685