您现在的位置是：首页 >技术杂谈 >0601概述-react路由-react网站首页技术杂谈

0601概述-react路由-react

gaog2zh 2023-05-30 12:00:01
简介0601概述-react路由-react

1 SPA与MPA

1.1 简述

单页面应用和多页面应用是两种不同的 Web 应用程序架构。

单页面应用（SPA）是指在一个 HTML 页面中动态加载和渲染所有的应用程序内容，通过前端 JavaScript 操作来实现页面的变化和交互。SPA 不需要每次请求新的 HTML 页面，因此可以提供更快的响应速度和更好的用户体验，但是需要处理前端路由、状态管理等问题。

多页面应用（MPA）是指每个页面都是一个单独的 HTML 页面，每次点击链接或刷新页面时都会发送一个新的请求并加载新的页面。MPA 在传统的 Web 应用程序中使用较多，它可以很容易地处理 SEO 和页面刷新等问题，但是需要处理页面间的通信、资源重复加载等问题。

单页面应用和多页面应用在设计思路和应用场景上有很大的不同。SPA 更适合于需要提供更好用户体验和更快响应速度的应用程序，例如社交媒体、电子商务、游戏等；而 MPA 更适合于需要搜索引擎优化和静态内容展示的应用程序，例如新闻、博客、官方网站等。

在实际开发中，可以根据具体的应用需求和技术选型来选择合适的应用程序架构，有时候也可以结合两种架构的优点来进行设计和开发。

单页面应用和多页面应用的常见区别：

不同点单页面应用（SPA）多页面应用（MPA）
组成一个主页面和多个页面片段多个主页面
刷新方式局部刷新整页刷新
url模式哈希模式历史模式
SEO搜索引擎优化难实现，可使用SSR方式改善容易实现
数据传递容易通过url、cookie、localStorage等传递
页面切换速度快，用户体验良好切换加载资源，速度慢，用户体验差
维护成本相对容易相对复杂

1.2 SPA

SPA（Single Page Application）单页面应用是一种 Web 应用程序架构，它使用 Ajax 和 HTML5 技术在单个页面上动态加载内容，而不是像传统的 Web 应用程序那样在每次导航时重新加载整个页面。单页面应用程序通常使用前端框架（如 React、Vue.js 或 Angular）和路由库（如 React Router 或 Vue Router）来实现。

在 SPA 单页面应用程序中，所有的页面内容都在一个 HTML 页面中动态加载和渲染，而不是通过浏览器重新加载整个页面。通常，SPA 单页面应用程序会在加载页面时使用 Ajax 请求服务器数据，并使用 JavaScript 动态更新页面内容。这意味着，用户可以在不刷新整个页面的情况下在应用程序中浏览不同的页面或内容。

SPA 单页面应用程序的优点包括：

  • 更好的用户体验：由于无需重新加载整个页面，SPA 单页面应用程序可以更快地响应用户操作，并提供更平滑的导航和交互效果。
  • 更快的加载速度：一旦初始的应用程序代码被加载和渲染，SPA 单页面应用程序可以在后台加载和缓存数据，以减少每个页面的加载时间。
  • 更好的可维护性：由于所有的应用程序逻辑都在前端代码中处理，因此可以更轻松地进行代码维护和部署。

然而，SPA 单页面应用程序也有一些缺点：

  • 首次加载慢：SPA 单页面应用程序通常需要一次性加载大量 JavaScript 代码和其他资源，这可能会导致首次加载时间较长。
  • 对 SEO 不友好：由于 SPA 单页面应用程序只有一个 HTML 页面和一个 URL，搜索引擎可能会难以理解和索引页面的内容，这可能会影响页面的排名和搜索流量。
  • 安全问题：由于所有应用程序代码都在前端执行，因此可能容易受到 XSS（跨站点脚本）攻击和其他安全威胁。

2 路由

2.1 简述

路由是指根据不同的 URL 地址，将不同的请求映射到对应的处理方法或视图，从而实现页面之间的跳转和数据传递。在 Web 应用程序中，路由通常用于控制页面的展示和交互。

在传统的多页面应用中，路由主要用于处理页面的导航和跳转。当用户点击链接或者提交表单时，浏览器会发送一个 HTTP 请求到服务器，服务器返回相应的 HTML 页面，然后浏览器重新加载页面并显示新的内容。在这种情况下，路由是由服务器进行控制的。

在单页面应用（SPA）中，路由主要用于控制页面的变化和交互。由于 SPA 不需要每次加载新的 HTML 页面，因此需要通过前端 JavaScript 操作来实现页面的变化和交互。前端路由会监听 URL 的变化，并根据不同的 URL 地址显示不同的页面内容或组件。在 SPA 中，路由通常是由前端框架（如 React、Vue.js 或 Angular）和路由库（如 React Router 或 Vue Router）来实现的。

Web 应用程序中的路由通常有以下几个组成部分：

  • URL 地址：指用户请求的地址，通常由路径和查询参数组成。
  • 路由规则：指 URL 地址与对应处理方法或视图的映射关系，通常使用路由配置文件或者路由库来进行配置。
  • 处理方法或视图：指处理 URL 地址请求的方法或者需要展示的页面内容，通常是服务器端或客户端的业务逻辑代码。

路由在 Web 应用程序中起到了非常重要的作用，它可以使用户快速地访问页面和数据，并且可以提高 Web 应用程序的用户体验和交互性。同时，路由的实现也是 Web 应用程序开发中的一个重要的技术难点，需要根据应用程序的需求和技术选型进行选择和配置。

2.2 简记

  • 映射：不同的请求（URL）映射到对应的处理方法或视图；

  • 目的：实现页面之间的跳转和数据传递。

  • 组成部分：

    • URL 地址：指用户请求的地址，通常由路径和查询参数组成。
    • 路由规则：指 URL 地址与对应处理方法或视图的映射关系，通常使用路由配置文件或者路由库来进行配置。
    • 处理方法或视图：指处理 URL 地址请求的方法或者需要展示的页面内容，通常是服务器端或客户端的业务逻辑代码。

2.3 分类

路由可以根据不同的分类方式进行分类，常见的分类方式包括以下几种：

  1. 前端路由和后端路由

前端路由是指通过 JavaScript 在客户端实现的路由，常用于单页面应用程序（SPA）中，通过监听 URL 变化来动态渲染页面。后端路由是指通过服务器端的路由规则来处理请求，常用于多页面应用程序（MPA）中，每次请求都会重新加载整个页面。

  1. 静态路由和动态路由

静态路由是指路由规则在应用程序启动时就已经确定，通常包含了固定的 URL 地址和处理方法或视图。动态路由是指路由规则在运行时动态生成，通常包含了可变的 URL 地址和处理方法或视图，例如根据不同的参数或用户权限来动态生成路由规则。

  1. 单层路由和嵌套路由

单层路由是指所有的路由都在同一层级下进行管理，通常用于简单的应用程序中。嵌套路由是指路由之间可以存在层级关系，通常用于复杂的应用程序中，例如应用程序中存在多个模块或者页面间存在关联关系。

  1. 客户端路由和服务器端路由

客户端路由是指通过 JavaScript 在客户端实现的路由，通过浏览器的 History API 来进行 URL 地址的控制和变化。服务器端路由是指通过服务器端的路由规则来处理请求，服务器端路由通常是通过 MVC 或者 RESTful 架构实现的。

根据不同的分类方式，路由的实现方式和应用场景也会有所不同。在实际应用程序中，需要根据应用程序的需求和技术选型来选择合适的路由实现方式。

3 前端路由原理

前端路由原理，底层借助于BOM中的history来完成，我们在浏览器控制台通过window.history打印看看，如下所示：

在这里插入图片描述

目前前端路由两种实现方式：

  • Hash模式
  • History模式：html5

History模式，演示示例代码3-1如下所示：

<!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">
		let history = History.createBrowserHistory() //方法一，直接使用H5推出的history身上的API
		// let history = History.createHashHistory() //方法二，hash值（锚点）

		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>
  • history.js是对原生window.history的封装，提供了更友好的API。

下面输出效果图3-1如下所示：

在这里插入图片描述

Hash模式演示，只需要修改如下注释即可：

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

输出结果图3-2如下所示：

在这里插入图片描述

两种实现模式对比：

对比点Hash 模式History 模式
美观性带着 # 字符，较丑简洁美观
兼容性兼容性好html5加入，老浏览器可能不支持
实用性不需要对服务端做改动需要服务端对路由进行相应配合设置

结语

❓QQ:806797785

⭐️源代码仓库地址：https://github.com/gaogzhen/react-staging.git

参考：

[1]React视频教程[CP/OL].2020-12-15.p74-76.

[2]React官网[CP/OL].

[3]ChatGPT[CP/OL].

[4] 对SPA（单页应用）的理解

[5] 前端路由原理

风语者！平时喜欢研究各种技术，目前在从事后端开发工作，热爱生活、热爱工作。

站长推荐