reactRouter1 - 路由实现原理(hash, history)

最新推荐文章于 2024-08-02 08:22:28 发布

素燃

最新推荐文章于 2024-08-02 08:22:28 发布

阅读量2.1k

点赞数

分类专栏： react-router 文章标签： react-router

总结不易，转载请说明出处哦!

本文链接：https://blog.csdn.net/qq_36407748/article/details/106522263

版权

react-router 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

实现原理

1. 利用hash和history这两种模式的底层api实现对路经的切换
2. 根据匹配到的路径，渲染对应的组件

hash模式原理

通过监听 hashchange 事件，在回调里拿到 window.location.hash 的值
hash 模式演示

  <body>
    <a href="#/a">去a</a>
    <a href="#/b">去b</a>
    <div id="box"></div>
  </body>
  <script>
    let dom = document.getElementById('box');
    // 当hash 值变化， 就会执行回调
    window.addEventListener('hashchange', function () {
      let hash = location.hash;
      dom.innerHTML = hash;
    });
  </script>

hash模式原理

利用History_API，进行路由切换, 在mdn上提到了history栈
说明它的存储形势是个栈结构

在这里插入图片描述

使用的Api：

1. history.pushState(stateObject, title, url) 用于路径的跳转(也就是向history栈添加数据)
2. history.replaceState() 用于修改栈中某个记录的数据
3. onpopstate: 每当活动的历史记录项发生变化时， popstate 事件都会被传递给window对象

history 路由效果演示

  <body>
    <button onclick="goA()">a页面</button>
    <button onclick="goB()">b页面</button>
    <button onclick="goC()">c页面</button>
    <div id="box"></div>
  </body>
  <script>
    let dom = document.getElementById('box');
    function goA() {
      // 传入3个参数：路由参数或自定义的数据， title的标题，要跳转的路径
      history.pushState({ page: 'A' }, 'a页面', '/a');
      dom.innerHTML = 'a 页面';
    }
    function goB() {
      history.pushState({ page: 'B' }, 'b页面', '/b');
      dom.innerHTML = 'b 页面';
    }
    function goC() {
      history.pushState({ page: 'C' }, 'c页面', '/c');
      dom.innerHTML = 'c 页面';
    }
    // 当用户点击浏览器的后退按钮时，触发操作
    window.onpopstate = (e) => {
      console.log(e.state);
      if (e.state.page === 'A') {
        history.pushState(null, null, document.URL);
      }
    };
  </script>