Question

我有这个onSubmit函数

 onSubmit = (e) => {
  const errors = this.validate(this.state);
  this.setState({ errors });
  e.preventDefault();
  var apiBaseUrl = "http://127.0.0.1:8000/api/auth/login";
  var self = this;
  var payload={
      "email":this.state.email,
      "password":this.state.password
  }
  var config = {
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    withCredentials: false
  }

  axios.post(apiBaseUrl, payload, config)
  .then(function (response) {
    console.log(response);
    if(response.status == 200){
        browserHistory.push('/upload');
    }
    else if(response.status == 204){
        console.log("Username password do not match");
        alert("username password do not match")
    }
    else{
        console.log("Username does not exists");
        alert("Username does not exist");
    }
})
.catch(function (error) {
console.log(error);
});
}

当用户登录时，应该将他/她定向到/ Upload路由。它确实得到重定向，链接确实显示/ upload，但页面仍处于登录状态

我需要调用UploadScreen.js（我想看到的页面）

这是我在App.js中的渲染路线。

  render() {
return (  
  <div className="ui container"> 
    <Route path="/" exact component={LoginPage} />
    <Route path="/upload" exact component={UploadScreen} />
  </div>
);

}

Answer 1

您必须安装“ react-router-dom”才能使用Route。如果尚未安装，则可以使用以下命令进行安装：

npm install react-router-dom

然后导入BrowserRouter，Route和Switch作为代码。

import { BrowserRouter, Route ,Switch}  from 'react-router-dom';

最后，您的App.js文件必须为

render() {
  return (  
     <div className="ui container"> 
       <BrowserRouter>
           <Switch>
             <Route path="/" exact component={LoginPage} />
             <Route path="/upload" exact component={UploadScreen} />
           </Switch>
       </BrowserRouter>
     </div>
  );
}

如果需要，可以像此代码一样更改“ LoginPage”组件。

import React, { Component } from 'react';
import axios                from 'axios';
import { Redirect }         from 'react-router-dom'; 

export default class LoginPage extends Component{
    constructor(props){
        super(props); 

        this.state = {
            redirect_to_upload: false
        };

    }

    onSubmit = (e) => {
        const errors = this.validate(this.state);
        this.setState({ errors });
        e.preventDefault();
        var apiBaseUrl = "http://127.0.0.1:8000/api/auth/login";
        var self = this;
        var payload={
            "email":this.state.email,
            "password":this.state.password
        }
        var config = {
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          withCredentials: false
        }

        axios.post(apiBaseUrl, payload, config)
        .then(function (response) {
          console.log(response);
          if(response.status == 200){
              selt.setState({
                redirect_to_upload : true
              }) 
          }
          else if(response.status == 204){
              console.log("Username password do not match");
              alert("username password do not match")
          }
          else{
              console.log("Username does not exists");
              alert("Username does not exist");
          }
      })
      .catch(function (error) {
        console.log(error);
      });
      }


    render() {
        return (
            <div>
                { this.state.redirect_to_upload ? <Redirect to="/upload" /> :'' }
                <div>
                    Your Login page content place here.  
                </div>
            </div>
        );
    }

}

browserHistory将我重定向到该路线，但我的页面是相同的

1 个答案: