React登录跳转遇到的问题

治电小白菜

发布于 2020-08-25 15:04:44

1.7K0

发布于 2020-08-25 15:04:44

文章被收录于专栏：技术综合技术综合

最近在对接登录接口，但是对接好后，跳转不会搞。。。醉了环境： 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))