Reaccione el enrutamiento de aprendizaje HashRouter y BrowserRouter

Hay dos formas de implementar el enrutamiento de React:

HashRouter: use hash para implementar el cambio de ruta
BrowserRouter: use h5 Api para implementar el cambio de ruta

1.1 HashRouter

Usando hash para realizar el cambio de ruta

< Cuerpo > 
    < div ID = "raíz" > </ div > 
    < un href = "# / a" >去/ a </ a > 
    < un href = "# / b" >去/ b </ a > 
  < / body > 
  < script > 
    let root = document.getElementById ( ' root ' ) 
    window.addEventListener ( ' hashchange ' , (event) =>{ 
      let hash =window.location.hash 
      root.innerHTML = hash 
    }) 
  </ script >

Simule el clic para cambiar de página. Cuando cambia el valor de hash en el navegador, se activará un evento llamado hashchange . Esta función tiene una devolución de llamada que puede obtener el valor de hash actual a través de window.location.hash.

1.2 BrowserRouter (enrutamiento del navegador)

El uso de h5 Api para lograr el cambio de enrutamiento se basa principalmente en el objeto de historial.

El objeto de historial proporciona una interfaz de historial para operar sesiones del navegador.
El atributo historylength declara el número de elementos en la lista de historial del navegador.
a pushState , el H5 introdujo history.pushState () e Historia. replaceState () método, respectivamente, puede añadir y modificar las entradas del historial, estos métodos típicamente utilizados en conjunción con window.onpopstate
onpopstate , window.onpopstate es el controlador de eventos para el evento popstate en el objeto de ventana

setTimeout (() => {
       // pushState no activará el evento 
      window.history.pushState ({page: 1}, 'page1', '/ page1' ) 
    }, 1000 ) 
    setTimeout (() => {
       // pushState no 
      Activará el evento window.history.pushState ({page: 2}, 'page2', '/ page2' ) 
    }, 2000 ) 
    setTimeout (() => {
       // pushState no activará el evento 
      window.history.pushState ({page : 3}, 'page3', '/ page3' ) 
    }, 3000 )
     // popstate 
    setTimeout (() => se activa al regresar{
       //ir (-1) atrás uno, activará el evento 
      popstate window.history.go (-1 ) 
    }, 4000)

La ruta actual se puede almacenar en el contenedor de historial a través de window.history.pushState. Esta estructura de contenedor es similar a la pila, que es la primera en entrar, primero en salir. Por supuesto, también puede volver a la ruta anterior a través de este método de window.history.go. Este método activará un popstate Evento, a través de este evento podemos hacer algunas operaciones, como agregar contenido a la página, etc.

// Este evento se activará cuando vaya (-1), puede cambiar el contenido del documento cuando se active 
    window.onpopstate = function (event) { 
      console.log (event) 
      root.innerHTML = window.location.pathname 
    }

El objeto de historial tiene eventos cuando se revierte, pero no desencadena eventos durante el estado de inserción. Si queremos realizar algunas operaciones nosotros mismos, debemos reescribir un evento onpushState para que podamos realizar operaciones de página.

let root = document.getElementById('root')
    window.onpushstate = function(state,title,url) {
      root.innerHTML = url
    }

    ;(function (history) {
      //1.缓存原生的pushState方法
      let pushState = history.pushState 
      //2.改写pushState方法
      history.pushState = function(state,title,url) {
        
        //3.自定义改写后的事件名为onpushstate
        if(typeof window.onpushstate === 'function') {
          window.onpushstate(state,title,url)
        }
        //4.调用原生方法并且执行
        pushState.call(history,state,title,url)
      }
    })(window.history)

看过vue源码的同学肯定知道vue里面对数组的响应式处理就是通过改写数组的那7个方法实现的。我们这里也一样，拦截了原生的方法，对原生方法进行了缓存，然后再改写原生方法，最后再执行，就这么简单。

完整版：

<body>
    <div id="root"></div>
  </body>
  <script>
    let root = document.getElementById('root')
    window.onpushstate = function(state,title,url) {
      root.innerHTML = url
    }

    ;(function (history) {
      //1.缓存原生的pushState方法
      let pushState = history.pushState 
      //2.改写pushState方法
      history.pushState = function(state,title,url) {
        
        //3.自定义改写后的事件名为onpushstate
        if(typeof window.onpushstate === 'function') {
          window.onpushstate(state,title,url)
        }
        //4.调用原生方法并且执行
        pushState.call(history,state,title,url)
      }
    })(window.history)
    //这个事件会在go(-1)的时候触发，可以在触发的时候改变文档内容
    window.onpopstate = function(event){
      console.log(event)
      root.innerHTML = window.location.pathname
    }
    // window.history 这是浏览器原生提供的对象，通过它来操作会话容器
    setTimeout( () => {
      //pushState不会触发事件
      window.history.pushState({page: 1},'page1','/page1')
    },1000)
    setTimeout( () => {
      //pushState不会触发事件
      window.history.pushState({page: 2},'page2','/page2')
    },2000)
    setTimeout( () => {
      //pushState不会触发事件
      window.history.pushState({page: 3},'page3','/page3')
    },3000)
    //后退的时候触发popstate
    setTimeout( () => {
      //go(-1)后退一个，会触发popstate事件
      window.history.go(-1)
    },4000)

  </script>

下一节写一个自己的路由库！

Reaccione el enrutamiento de aprendizaje HashRouter y BrowserRouter

Supongo que te gusta