LEARN_框架_React-router原理

前言

我们可以发现 react-router 用 Link 或者 Push 跳转的时候，页面没有刷新，Url 却发生了变化，而且点击浏览器的返回按钮，页面同样没有刷新，Url 又回退了，这是为什么呢？

解密 - 点击返回按钮页面不刷新

HashRouter 分析

通过 location.hash 来达到 url 变化但是页面不刷新

location.hash = hash

然后通过 onhashchange 来监听浏览器的返回事件

window.addEventListener('onhashchange', function (event) {
  changeDisplayName() // 替换显示内容
})

BrowserRouter 分析

通过 pushState 来达到 url 改变但是页面不刷新，history.push 实际上用原生的 history.pushState 来实现的，history.replace 实际上是用原生的 history.replaceState 来实现的。

changeDisplayName() // 替换显示内容
window.history.pushState(null, null, newUrl)

然后通过 popstate 来监听浏览器的返回事件

window.addEventListener('popstate', function (event) {
  changeDisplayName() // 替换显示内容
})

demo:

import React, { useEffect, useState, useRef, Component } from 'react';

const MapPage = () => {
  return <div>MapPage</div>
}
const RankPage = () => {
  return <div>RankPage</div>
}

function ConPage() {
  const [ Page, setPage ] = useState('rank');

  useEffect(() => {
    window.addEventListener('popstate', (event) => {
      console.log("location: " + document.location + ", state: " + JSON.stringify(event.page));
      let val;
      if(event.page=='rank') {
        val='rank'
      }else{
        val='map'
      }
      console.log('useEffect',val) 
      setPage(val)
    });
  }, [])


  const _changePage = () => {
    if( Page=='rank' ) {
      setPage('map')
      window.history.pushState({page:'map'}, null, 'http://dev.jd.com:10086/con?pId=map');
     } else {
      setPage('rank')
      window.history.pushState({page:'rank'}, null, 'http://dev.jd.com:10086/con?pId=rank');
     }
  }

  return (
    <div>
      <div onClick={_changePage} className='btnTest'> 切换路由</div>
      {Page=='rank' && <RankPage />}
      {Page=='map' && <MapPage />}
    </div>
  )
}
export default ConPage