React登录跳转遇到的问题
2017-11-24 本文已影响1181人
ZZES_ZCDC
最近在对接登录接口，但是对接好后，跳转不会搞。。。醉了
环境：
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 = () => (
<main>
<BrowserRouter>
<Switch>
<Redirect exact from="/" to="/manage/foods"/>
<Route exact path='/login' component={Login}/>
......
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))
