withRouter的使用
withRouter的作用:可以让一般组件的身上也有路由组件的API
如下是一个一般组件,而一般组件是没有路由组件身上的API,所以如果想要让一个一般组件拥有
路由组件身上的API来实现跳转传参,需要把定义好的组件包裹在withRouter()中
import React, { Component } from 'react'
// 引入了withRouter之后可以让一般组件的身上也有路由组件的API
import {withRouter} from 'react-router-dom'
class Header extends Component {
back = () => {
this.props.history.goBack()
}
forward =() => {
this.props.history.goForward()
}
go =() => {
this.props.history.go(2)
}
render() {
return (
<div className="page-header">
<h2>Vue Router Demo</h2>
<button onClick= {this.forward}>前进</button>
<button onClick= {this.back}>后退</button>
<button onClick= {this.go}>前进或者是后退</button>
</div>
)
}
}
export default withRouter(Header)
//withRouter的返回值是一个新组件
BrowserRouter与HashRouter的区别
1)底层原理不一样
BrowserRouter使用的是H5的history API,不兼容IE9及以下版本
HashRouter使用的是url的哈希值
2)path的表现形式不一样
BrowserRouter的路径中没有#,例如:localhost:3000/demo/test
HashRouter的路径中有#,例如:localhost:3000/#/demo/test
3)刷新后路由对state的影响
BrowserRouter没有任何的影响,因为state保存在history对象中
HashRouter刷新后会导致路由state参数的丢失
4)备注:HashRouter可以用于解决一些路径错误相关的问题