【新手求助】react-router4.0 除link外其他跳转方式

#1

用broswerhistory.push(),不能跳转，求教react-router4.0该如何点击跳转。

#2

点击事件跳转

// 引入`withRouter`
import { withRouter } from 'react-router-dom'

// 使用`withRouter`包裹组件
withRouter(Component)

// 在方法中使用`this.props.history.push`跳转
handleClick () {
  this.props.history.push('/')
}
2 Likes
#3

如果也在用 redux 的话，也使用 react-router-redux

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import { bindActionCreators } from 'redux';


const mapStateToProps = null;

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({ push }, dispatch)
  };
}

@connect(mapStateToProps, mapDispatchToProps)
export default class Hello extends Component {

  handleOnClick = () => this.props.actions.push('/home')

  render() {
    return <div onClick={this.handleOnClick}/>
  }
};

只是要注意的是，对于react-router 4，react-router-redux要用next版本

npm install --save react-router-redux@next
npm install --save history