一、前端路由解决什么问题？ 每个技术点的出现，都是为了解决当前的某一些问题，那么，前端路由的出现，又是解决了什么问题呢？ 1、问题背景 从历史的发展总能找到些蛛丝马迹，让我们在当前的。..

一、前端路由解决方案

1.1 前端路由解决什么问题？

每个技术点的出现，都是为了解决当前的某一些问题，那么，前端路由的出现，又是解决了什么问题呢？

1、问题背景

从历史的发展总能找到些蛛丝马迹，让我们在当前的阶段往前推一下，拎出那个时代的背景以及它的问题
Test
不难看出，前端路由的出现，是要帮助我们在仅有一个页面的情况下，“记住”用户当前走到了哪一步。因此，它需要为
SPA
（单页面应用）中的各个视图配置一个唯一标识，这意味着用户前进、后退触发的内容，都会映射到不同的
URL
上去。此时即便刷新页面，内容也不会消失，因为当前的
URL
已经有能力识别到它所处的位置了。

2、SPA“定位”两大痛点

我们还是回到上图，细细解剖下
SPA
下的两大痛点：

当用户刷新页面时，浏览器会默认根据当前
URL
对资源重新定位（回到最初的状态） - 这个动作不仅使得用户的前进后退操作无法被记录，而且它是不必要的，你想想：
SPA
作为单页面，本身也只会有一个资源与之对应

SPA
对服务端而言，就是一个
URL
、一个资源。如何将其改变为“多个
URL
” 映射多个视图内容呢？

3、SPA“定位”解决思路

问题已经摆出来了，那么，解决问题的思路是如何呢？

首先：拦截用户的刷新操作，避免服务端盲目响应，返回不符合预期的资源内容，把刷新这个动作完全放到前端逻辑里消化掉
感知
URL
的变化。前端给
URL
做些不会影响其本身性质的微小处理，不会影响服务器对它的识别，只有前端能感知到，进而通过
JS
去生成不同的内容

4、hash 与 history 实践

思路清晰了，那么目前前端界对此有哪些实现思路呢？
hash
模式
通过增加和改变哈希值，从而让页面感知到路由变化，换句话说就是改变
URL
后面以
#
分隔的字符串，比如下面这样一个
URL
www.huamu.com/

改变
URL
后面以
#
分隔的字符串，即哈希值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  // 主页
https://www.huamu.com/#index  
// 博客页
https://www.huamu.com/#blog

  `那么，在```text
  hash
  `模式下，```text
  JS
  `是如何捕获到哈希值的内容呢？```text
  hash
  `的改变 - 通过```text
  location
  `暴露出来的属性，直接修改当前```text
  URL
  `的```text
  hash
  `值```java
  window.location.hash = 'index';

的感知 -
JS
通过监听
hashchange
事件来捕捉
值的变化，进而决定页面内容是否需要更新

1
2
3
4
5
  // 监听hash变化
window.addEventListener('hashchange',()=>{
    // 根据hash值的变化更新内容
},false)

history
模式
点击浏览器的前进后退会触发
的感知，同时，浏览器的
history API
也给我们提供了接口来操作它的历史
在
HTML 4
阶段提供了“切换”的三个接口，如下：

前进

1
2
3
4
  // 前进到下一页
window.history.forward()
// 前进两页
window.history.go(2)

`后退```java

1
2
3
4
  // 后退到上一页
window.history.back()
// 后退两页
window.history.go(-2)

到```text HTML 5

1
2
3
4
5
6
7
8
9
10
11
12
 阶段新增了“改变”的两个接口 
 
 新增 
 
 
  // 向浏览历史中追加一条记录
history.pushState(data[,title][,url])

  `更新```java
  // 更新当前页在浏览历史中的信息
history.replaceState(data[,title][,url])

的感知 -forward、back和go方法的调用会触发popstate，但pushState和replaceState`
不会，需通过自定义事件和全局事件总线来触发事件，进而每当浏览历史发生改变时，
事件都会被触发

1
2
3
  // 监听history变化
window.addEventListener('popstate',(e)=>{
    console.log(e)

#### 1.2 二、React-Router 如何实现路由跳转
了解了背后的机制，再看表面现象，或许有不一样的认识。接下来，我们来回顾一下 
 `React-Router` 
 中的3个核心角色 
##### 1、3个核心角色
 
导航，比如  
 `Link` 
 、 
 `NavLink` 
和  
 `Redirect` 
 （以 
 为代表）负责触发路径的改变  
路由，比如  
 `Route` 
 和 
 `Switch` 
 （以 
 为代表）负责定义路径与组件之间的映射关系  
路由器，比如 
 `BrowserRouter` 
 和 
 `HashRouter` 
 ，根据 
 定义出来的映射关系，为新的路径匹配它对应的逻辑  
 
##### 2、路由器
其中，负责感知路由的变化并作出反应的路由器，是整个路由系统中最为重要的一环。在 
 中支持两种路由规则： 
 和 
 分别对应了 
 和 
 两种背后模式，让我们透过源码，揭开这层面纱 
 
 HashRouter 
 
 
 BrowserRouter 
 
在图中，我们标识出关键的区别，即调用的 
 实例化方法是不同的： 
 

调用  
 `createHashHistory`
 通过使用hash tag(#) 来处理形如 
 `www.huamu.com/#index` 
 的 URL，即通过 URL 的 hash 属性来控制路由跳转 
证据如下 
 

 调用  
 `createBrowserHistory`
它将在浏览器中使用 HTML 5 的 history API 来处理形如  
 `www.huamu.com/index` 
 的 URL，即通过 HTML 5的 history API 来控制路由跳转

本文标题： 前端路由解决方案

发布时间： 2022年02月24日 00:00

最后更新： 2025年12月30日 08:54

原始链接： https://haoxiang.eu.org/1592077f/

版权声明： 本文著作权归作者所有，均采用CC BY-NC-SA 4.0许可协议，转载请注明出处！

赏
× 喜欢就赞赏一下呗！
打赏二维码