【React 全家桶】前端路由基本原理

最新推荐文章于 2022-08-23 16:30:00 发布

原创最新推荐文章于 2022-08-23 16:30:00 发布 · 307 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #react.js #javascript #前端框架 #react

React 全家桶专栏收录该内容

15 篇文章

订阅专栏

本文介绍了前端路由的两种主要模式：History模式和Hash模式，并详细解释了History模式的工作原理，包括如何利用history API来实现前端路由的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端路由基本原理

前端路由的两种模式
history API
history模式原理的理解

前端路由的两种模式

前端路由主要有两种模式，一种是History模式，另一个是Hash模式。

模式	描述
History模式	1、url是不带#的，例：react/test1；react/test2。2、在服务器运行时去进行刷新等操作时会出现404错误，它需要更多的后端配置
Hash模式	1、rul是带#号的，例：react#/test1；react#/test2。2、服务器运行不会出现404。

history API

在HTML4中，已经支持window.history对象来控制页面历史记录跳转，常用的方法包括：

history API	描述
history.forward()	在历史记录中前进一步
history.back()	在历史记录中后退一步
history.go(n)	在历史记录中跳转n步骤，n=0为刷新本页,n=-1为后退一页。

在HTML5中，window.history对象得到了扩展，新增的API包括：

history API	描述
history.pushState(data[,title][,url])	向历史记录中追加一条记录
history.replaceState(data[,title][,url])	替换当前页在历史记录中的信息。
history.state	是一个属性，可以得到当前页的state信息。
window.onpopstate	是一个事件，在点击浏览器后退按钮或js调用forward()、back()、go()时触发。监听函数中可传入一个event对象，event.state即为通过pushState()或replaceState()方法传入的data参数。

history模式原理的理解

首先我们要改造我们的超链接，给每个超链接增加onclick方法，阻止默认的超链接跳转（return false），改用history.pushState或history.replaceState来更改浏览器中的url，并修改页面内容。由于通过history的api调整，并不会向后端发起请求，所以也就达到了前端路由的目的。
如果用户使用浏览器的前进后退按钮，则会触发window.onpopstate事件，监听页面根据路由地址修改页面内容。