React登录跳转遇到的问题

最近在对接登录接口，但是对接好后，跳转不会搞。。。醉了
环境：
1.React16
2.React Router v4

1.方法一

这个方法完美解决。

图片.png

具体就是，要自己新建一个history.js文件，然后将它引入router和登录中。
上图很清楚，有问题直接评论

2.方法二

当然，v4上 BrowserRouter 提供了 hisotry 对象，所以有了方法二.可以使用withRouter;API文档：https://reacttraining.com/react-router/web/api/withRouter

1.路由代码，使用BrowserRouter

......
import {BrowserRouter, Route, Switch, Redirect} from "react-router-dom";
......

const App = () => (

  

    
      
        
        
......

2.请求代码

具体的helper请求封装，请看这篇文章最下面：http://www.jianshu.com/p/4da550ac7f15

1）请求跳转函数

handleLogin =(e) => {
    e.preventDefault()
    this.props.form.validateFields((err, values)=>{
      if(!err){
        let data={}
        data.username = values.username
        data.password = values.password
        loginReq(data)
          .then(function(req){
            if(req ==='success'){
              //登录成功跳转
              this.props.history.push('/')
            }else if(req === 'error'){
              message.error('用户名或密码错误！')
            }
          }.bind(this))//这里需要把this绑定，不然报错
      }
    })
  }

2）组件放入withRouter

......
import { withRouter} from 'react-router-dom'
......
export default withRouter(Form.create({
  mapPropsToFields(props) {
    return {
      username: { value: '' },
      password: { value: '' },
      autologin: { value: '' }
    }  
  }
})(LoginForm))

参考资料

• https://github.com/ReactTraining/react-router/blob/master/FAQ.md#how-do-i-access-the-history-object-outside-of-components
• https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router