web前端技术分享：使用react实现简易路由

众所周知，在web前端开发单页面使用路由目前有两种方式可以实现，一种是使用hash模式，另外一种就是history模式，今天小千就来给大家介绍一下这个history模式，喜欢的话记得收藏。

history 模式

路由原理：

History 模式是 HTML5 新推出的功能，基于pushState和popstate两个api实现的，比之 Hash 模式更加美观。

当首次进入项目，向服务器发送请求，后端需要配合重定向，凡是处理不了的请求都响应单页面的html。跳转进入路由由pushState完成，并且匹配路由显示对应的页面。而路由执行回退时，监听popstate事件，显示对应的页面。

react代码实现：

1.使用react脚手架构建一个react的项目：

>npx create-react-app my-app

2.创建两个组件home.js,setting.js，使用history路由来实现两个组件的切换。

项目目录如下：

3.在App.js文件中，我们需要实现如下的效果：

4.整个结构使用Router组件包裹，由Route组件承载每一项路由的组件，由Link标签实现切换。那么我们来看一下router内部如何实现的。

先来看一下router文件夹的结构：

组件Router，Route，Link在router/Route.js,router /Route.js,route/Link.js三个文件中实现。router/index.js将三个组件集成方便外部调用。来看一下index.js的内容：

5.整个路由项目被Router标签包裹，实际上需要达到共享路由当前地址的目的，借助react中的context来实现。同时Router组件需要在项目首次加载时解析当前的pathname值。并且监听浏览器回退事件，也需要修改路由共享地址的值。另外，项目每一次重新进入，不管访问地址是什么，都需要后台响应index.html页面，加载项目代码，由前端项目来控制显示路由管理的组件(这部分需求需要后台配合实现)。修改代码如下：

6.Route组件是根据当前的history地址判断当前的Route承载的组件是否应该显示，代码如下：

注：如果需要实现路由嵌套和动态路由，当前的history地址和组件配置的地址比较就不是使用===判断这么简单了，在这里我不做陈述，感兴趣的话可以自己研究一下。

7.Link组件需要触发使用pushState切换浏览器地址而有不会向服务器请求，并且修改context中的history地址。代码如下：

本文来自千锋教育，转载请注明出处。

web前端技术分享：使用react实现简易路由相关推荐

好程序员web前端技术分享媒体查询
为什么80%的码农都做不了架构师?>>> 好程序员web前端技术分享媒体查询什么是媒体查询媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向 ...
Web前端技术分享：学习HTML和CSS的5大理由
人们学习HTML和CSS最常见的原因是开始从事Web开发.但并不是只有Web开发人员才要学习HTML和CSS的核心技术.作为一个网络用户,你需要你掌握的相关技术很多,但下面小千总结了5个你无法拒绝学习 ...
web前端技术分享：前端开发与后端开发的区别是什么？
相信很多人在技术岗都听到过前端和后端这两个职位,但是大部分人对前端开发与后端开发的区别是什么?并不是很清楚,下面小千就为大家详细的介绍一下两者的区别之处. web前端分享:前端开发与后端开发的区别是什 ...
web前端技术分享：常用JavaScript框架有哪些？
常用JavaScript框架有哪些?对于前端开发工作者来说,JavaScript绝对是绕不开的一个点,可以所前端的大部分动态交互都是由JS完成,所以学好JavaScript基本上你就成功了一半.下面小 ...
web前端技术分享：web前端的求职前景好不好？
想要进军互联网行业,大部分人会选择web前端和web前端这两个技术,因为两者之间的发展前景是非常好的.下面我们就先来了解一下web前端的求职前景好不好? web前端的求职前景好不好?近几年的热门行业里 ...
web前端技术分享：详解模块化require 和 import的区别
在前端开发中,我们可以使用很多模块化的库来帮助我们更好的实现效果,有一些库的功能类似很多同学就不知道该如何选择,比如require和import,今天小千就给大家介绍一下两者的区别. 一.区别 1.r ...
Web前端技术分享：img标签下方出现空隙的问题解决方案
很多初学小伙伴在写页面的时候碰到过一个问题,当我们用一个div直接包裹img,img的下方会出现3px间距,如图代码如下: 为什么会出现这种情况呢? 因为img是一种类似text的标签元素,在结束的 ...
Web前端技术分享：CSS菜单图标相关知识
CSS是一种用来表现HTML或XML等文件样式的计算机语言,它是Web前端人才必须要掌握的基础技能之一.想要学习Web前端,最开始的基础学习一定是CSS.接下来我就给大家简单分享CSS菜单图标相关知识 ...
Web前端技术分享之前后端分离接口
随着互联网的高速发展以及IT开发技术的升级,前后端分离已成为互联网项目开发的业界标准使用方式.在实际工作中,前后端的接口联调对接工作量占Web前端人员日常工作的30%-50%,甚至会更高.接下来就给大 ...

web前端技术分享：使用react实现简易路由

history 模式

web前端技术分享：使用react实现简易路由相关推荐

最新文章

热门文章