React-Router的实现原理是什么？

[MrSeaWave]

1. React-Router的实现原理是什么？

客户端路由实现的思想：

• 基于 hash 的路由：通过监听hashchange事件，感知 hash 的变化

  • 改变 hash 可以直接通过 location.hash=xxx

// hash 
window.addEventListener('hashchange',function(e){
    /* 监听改变 */
})

• 基于 HTML 5 history 路由：

  • 改变 url 可以通过 history.pushState 和 resplaceState 等，会将URL压入堆栈，同时能够应用 history.go() 等 API
  • 监听 url 的变化可以通过自定义事件触发实现

// history
window.addEventListener('popstate',function(e){
    /* 监听改变 */
})

// 注意⚠️的是：用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件。 popstate 事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮或者调用 history.back()、history.forward()、history.go()方法。

react-router 实现的思想：

• 基于 history 库来实现上述不同的客户端路由实现思想，并且能够保存历史记录等，磨平浏览器差异，上层无感知
• 通过维护的列表，在每次 URL 发生变化的回收，通过配置的 路由路径，匹配到对应的 Component，并且 render

[MrSeaWave]

「源码解析 」这一次彻底弄懂react-router路由原理

[MrSeaWave]

https://vue3js.cn/interview/React/React%20Router%20model.html#hashrouter