React路由

最新推荐文章于 2024-05-11 09:24:04 发布

Java硬件工程师

最新推荐文章于 2024-05-11 09:24:04 发布

阅读量604

点赞数

分类专栏：前端 react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_39736597/article/details/130498901

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

react

4 篇文章 0 订阅

订阅专栏

SPA的理解

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

路由的理解

什么是路由?

一个路由就是一个映射关系(key:value)
key为路径, value可能是function或component
（这里路径指的是url地址栏中去掉ip+端口号）

路由分类

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

前端路由原理的基石

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

	<script type="text/javascript" src="https://cdn.bootcss.com/history/4.7.2/history.js"></script>
	<script type="text/javascript">

		/**
		 * DOM:DOM (文档对象模型) 是指Web页面上所有HTML元素组成的树形结构，它提供了一种访问和操作HTML元素的方法，可以通过JavaScript来动态修改页面内容、结构和样式等。
		 * DOM由W3C定义，是一个标准化的API接口。
		 * 
		 * BOM:BOM (浏览器对象模型) 是指浏览器提供给JavaScript的对象集合，用于访问浏览器本身的功能和属性，例如窗口大小、地址栏URL、历史记录、定时器、对话框、屏幕分辨率等。
		 * BOM没有统一的标准，不同的浏览器会有不同的实现。
		 * BOM里面就有一个history，管理浏览器的历史记录和路径。但是我们不直接操作BOM的history

			React前端路由的基石，也是靠BOM路由上的小点
		 * **/ 



		// let history = History.createBrowserHistory() //方法一，直接使用H5推出的history身上的API
		let history = History.createHashHistory() //方法二，hash值（锚点）

		function push (path) {
			// 往历史记录中推送一条数据
			history.push(path)
			// 禁止a标签跳转
			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>