一.编程式路由导航
借助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的区别
- 底层原理不一样:
BrowserRouter使用的是H5的history API
HashRouter使用的是URL的哈希值 - path表现形式不一样
BrowserRouter的路径中没有#,例如localhost:3000/demo/test
HashRouter的路径中包含#,例如localhost:3000/#/demo/test
- 刷新后对路由state参数的影响
BrowserRouter没有任何影响,因为BrowserRouter使用的是history API,刷新操作对历史记录没有影响,state保存在history对象中
HashRouter刷新会导致路由state参数的丢失
备注:HashRouter可以用于解决一些路径错误的问题