React—12—ReactRouter

news/2025/3/13 10:27:21/文章来源:https://www.cnblogs.com/EricShen/p/18758359

一、路由

◼ 路由其实是网络工程中的一个术语:
 在架构一个网络时,非常重要的两个设备就是路由器和交换机。
 当然,目前在我们生活中路由器也是越来越被大家所熟知,因为我们生活中都会用到路由器:
 事实上,路由器主要维护的是一个映射表;
 映射表会决定数据的流向;
◼ 路由的概念在软件工程中出现,最早是在后端路由中实现的,原因是web的发展主要经历了这样一些阶段:
 后端路由阶段;
 前后端分离阶段;
 单页面富应用(SPA);
 
◼ 早期的网站开发整个HTML页面是由服务器来渲染的.
 服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示.
◼ 但是, 一个网站, 这么多页面服务器如何处理呢?
 一个页面有自己对应的网址, 也就是URL;
 URL会发送到服务器, 服务器会通过正则对该URL进行匹配, 并且最后交给一个Controller进行处理;
 Controller进行各种处理, 最终生成HTML或者数据, 返回给前端.
◼ 上面的这种操作, 就是后端路由:
 当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户端.
 这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示, 这样也有利于SEO的优化.
◼ 后端路由的缺点:
 一种情况是整个页面的模块由后端人员来编写和维护的;
 另一种情况是前端开发人员如果要开发页面, 需要通过PHP和Java等语言来编写页面代码;
 而且通常情况下HTML代码和数据以及对应的逻辑会混在一起, 编写和维护都是非常糟糕的事情;
 
◼ 前端渲染的理解:
 每次请求涉及到的静态资源都会从静态资源服务器获取,这些资源包括HTML+CSS+JS,然后在前端对这些请求回来的资源进行渲染;
 需要注意的是,客户端的每一次请求,都会从静态资源服务器请求文件;
 同时可以看到,和之前的后端路由不同,这时后端只是负责提供API了;
◼ 前后端分离阶段:
 随着Ajax的出现, 有了前后端分离的开发模式;
 后端只提供API来返回数据,前端通过Ajax获取数据,并且可以通过JavaScript将数据渲染到页面中;
 这样做最大的优点就是前后端责任的清晰,后端专注于数据上,前端专注于交互和可视化上;
 并且当移动端(iOS/Android)出现后,后端不需要进行任何处理,依然使用之前的一套API即可;
 目前比较少的网站采用这种模式开发;
◼ 单页面富应用阶段:
 其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由.
 也就是前端来维护一套路由规则.
◼ 前端路由的核心是什么呢?改变URL,但是页面不进行整体的刷新。
 

 

 

 

 

 

 

二、ReactRouter

◼ 目前前端流行的三大框架, 都有自己的路由实现:
 Angular的ngRouter
 React的ReactRouter
 Vue的vue-router
◼ React Router在最近两年版本更新的较快,并且在最新的React Router6.x版本中发生了较大的变化。
 目前React Router6.x已经非常稳定,我们可以放心的使用;
◼ 安装React Router:
 安装时,我们选择react-router-dom;
 react-router会包含一些react-native的内容,web开发并不需要;

 

 

npm install react-router-dom

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/895230.html

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

相关文章

如何将立创EDA/Altium Designer绘制的原理图导入/转换为Visio格式

相信各位写论文的学生在绘制论文电路图的时候都有苦恼,手绘太烦太累,在AD或立创EDA上已经绘制的又没有方便的导入软件 me too,直至今天找到一种非常方便的导入方式,除了拐角处有那么一丢丢缺陷其他感觉不错,下面予以介绍,顺便做个记录以防自己再忘了。 思路 PCB原理图的绘…

新版本将飞飞资源提取到unity中

旧版本方法:飞飞资源提取工具atools→3DMAX→unity 旧版文章链接:[Unity3D] 如何将飞飞游戏资源提取并加载到uinty3d中 - 伊凡晴天 - 博客园新版方法:飞飞资源提取工具atools→blender3.6→unity 新版方法视频:如何将飞飞游戏资源提取到unity中_哔哩哔哩_bilibili飞飞资源提取工…

电压转换模块

一、DCDC,LDO,电压基准的区别? DCDC电源转换电路可以承受大的压差,输出电流也比较大,带负载能力强,随随便便可以有几A的电流输出 DCDC即可以降压,还可以升压,而LDO只能降压。 LDO又叫线性稳压器,他的特点是输入电流和输出电流相当,这就造成了一个特别巨大的问题,就是…

多线程程序设计(二)——Immutable

本文摘要了《Java多线程设计模式》一书中提及的 Immutable 模式的适用场景,并针对书中例子(若干名称有微调)给出一份 C++ 参考实现及其 UML 逻辑图,也列出与之相关的模式。 ◆ 适用场景 多个线程在同时访问共享数据时,只需要读取数据而不必修改数据。 ◆ 解决方案 无需使用…

第三周第五天

所用时间:315分钟 代码量(行):197 博客量(篇):1 了解到的知识点: 1.完成了简单的安卓程序开发 通过springboot后端应用服务器将安卓程序插入到mysql数据库 程序页面如下:刚开始添加好一会儿都进不去,原来是服务器没弄好,服务器路径一定要搞好 我测试用的路径:url(&…

第二次作业-个人项目

第二次作业这个作业属于哪个课程 第二次作业这个作业要求在哪里 作业要求这个作业的目标 完成论文查重程序Github仓库地址 https://github.com/Simonysc-123/3123004761PSP2.1 Personal Software Process Stages 预估耗时(分钟 实际耗时(分钟)Planning 计划 10 15Estimate 估…

项目里如何引入阿里巴巴矢量图标库-iconfont

项目里如何引入阿里巴巴矢量图标库-iconfont 一、搜索或者直接选择自己想要的图标类型 二、选中想要的图标,加入购物车,可以选择多个 三、点击购物车可以将选择的图标加入原有项目,也可以新建项目 四、确定之后,选择下载至本地(下载后的图标是灰色的,没有颜色,若想有…

Qt个人项目总结 —— MySQL数据库查询与断言

3.Qt项目总结——数据库查询断言问题问题:当我使用MySQL数据库的查询操作时, 如果查询的数据在数据库中不存在,那么Qt会直接被干崩溃 但是?为什么呢?不应该是返回if语句中的结果吗,为什么会崩溃呢?bug代码示例 =======================================================…

Effective log parsing in log streams using fixed depth forest 论文笔记

挑战 主要讲的是 Drain 的一些问题: ① 对于变量开头的日志会存在解析错误 ② 常量在变量之前发生变化的日志也会导致解析错误 框架预处理 对于源日志,采用随机修改 token 的下标(即顺序)分成几个子日志,相当于数据增强 候选模版生成 这里采用的就是 Drain 的解析过程,为…

P2241 统计方形(数据加强版)

题目背景 1997年普及组第一题 题目描述 有一个 $n \times m$ 方格的棋盘,求其方格包含多少正方形、长方形(不包含正方形)。 输入格式 一行,两个正整数 $n,m$($n \leq 5000,m \leq 5000$)。 输出格式 一行,两个正整数,分别表示方格包含多少正方形、长方形(不包含正方形…