React学习--BrowserRouter与HashRouter的区别，withRouter用法

一.编程式路由导航

借助this.props.history对象上的API操作路由跳转、前进、后退

• this.props.history.push()
• this.props.history.replace()
• this.props.history.goBack()
• this.props.history.goForward()
• this.props.history.go()

二.withRouter的使用

import {
     withRouter} from 'react-router-dom'
class Header extends React.Component{
     
}
export default withRouter(Header)//用这种方式暴露

• withRouter可以加工一般组件，让一般组件具备路由组件所特有的API
• withRouter的返回值是一个新组件

三.BrowserRouter与HashRouter的区别

1. 底层原理不一样：
   BrowserRouter使用的是H5的history API
   HashRouter使用的是URL的哈希值
2. path表现形式不一样
   BrowserRouter的路径中没有#，例如localhost:3000/demo/test
   HashRouter的路径中包含#，例如localhost:3000/#/demo/test
3. 刷新后对路由state参数的影响
   BrowserRouter没有任何影响，因为BrowserRouter使用的是history API，刷新操作对历史记录没有影响，state保存在history对象中
   HashRouter刷新会导致路由state参数的丢失
   备注：HashRouter可以用于解决一些路径错误的问题