BrowserRouter和HashRouter的区别

HashRouter

HashRouter使用的是URL的hash部分（即window.location.hash），来保持页面的UI与URL的同步。

哈希历史记录不支持location.key或location.state。

basename: string
这个代表所有位置的基本url，格式正确的基本名称基本都有一个前导斜杠"/"，但没有尾部斜杠。

<HashRouter basename="/home">
<Link to="/today"/>

getUserConfirmation: func
用于确认导航的功能，默认使用window.confirm。

const getConfirmation = (message, callback) => {
  const allowTransition = window.confirm(message);
  callback(allowTransition);
}

<HashRouter getUserConfirmation={getConfirmation }/>

hashType: string
用于window.location.hash的编码类型，取值范围为

slash: #/
noslash: #
hashbang: #!

默认为slash。

BrowseRouter

使用HTML5的history API（pushState, replaceState和popState），让页面的UI与URL同步。

import  { BrowserRouter }  form 'react-router-dom';
< BrowserRouter 
  basename = { optionalString } 
  forceRefresh = { optionalBool } 
  getUserConfirmation = { optionalFunc }
  keyLength = { optionalNumber } 
>
  < App />
</ BrowserRouter >

HashRouter和BrowserRouter的区别

URL的表现形式不一样
BrowseRouter使用HTML5的history API，保证UI界面和URL同步。HashRouter使用URL的哈希部分来保持UI和URL的同步。哈希历史记录不支持location.key和location.state。
HashRouter不支持location.state和location.key
首先我们需要了解页面之间传值的方式，参考我之前写的文章
React页面传值的做法
通过state的方式传值给下一个页面的时候，当到达新的页面，刷新或者后退之后再前进，BrowseRouter传递的值依然可以得到。

之后是测试阶段

class About extends Component{
  constructors(props){
    super(props);
  }
  render(){
    return(
      <div className="demo">
        <div>
          parameter: {JSON.stringify(this.props.location)}
        </div>
      </div>
    );
  }
}

之后是跳转的操作：

this.props.history.push({
  pathname: '/about',
  state: {
    msg: 'parameter'
  }
});

之后看BrowseRouter和HashRouter的打印结果。

HashRouter

//第一次打印的结果
parameter: parameter
//刷新页面或者后退再前进
parameter:

BrowseRouter

//第一次打印的结果
parameter: parameter
//刷新页面或者后退再前进
parameter: parameter

由于HashRouter没有使用html5中的history API，无法从历史记录中得到key和state的值，所以当刷新路由后state值会丢失导致页面显示异常。