如何使用create-react-app从渐进式Web应用程序中的登录重定向到其他页面

Question

我正在尝试使用create-react-app和react.js制作应用。我已经构建了所有的ui，并且从后端我可以验证凭据，并获得消息登录成功，但我可以重定向到其他一些页面。有人请给出一些答案。先感谢您。 这是我的登录.js

import React, { Component } from 'react';
import {Layout, Header, Content, Textfield, Button} from "react-mdl";
import Router from "react-router-dom/HashRouter";
import axios from 'axios';
import mainscreen from './mainscreen';
//import logo from './logo_fitcoop.png';
import lo from './logo_splash.png';
import {browserRouter, Route, Link} from 'react-router-dom';
import main from './mainscreen';

class login extends Component {
    constructor(props){

  super(props);
  this.state={
  username:'',
  password:'',
  mainscreen:[],
  isloggedin:false
  }
 }
 handleClick(event){
   var isloggedin: false;
 var apiBaseUrl = "http://172.17.1.25:7070/FitPwappReceptor/rest/sig";
 var self = this;
 var config = {
   headers: {'Content-Type': 'application/x-www-form-urlencoded',
          'Authorization': 'Bearer token',
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
          'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'
}
}
 var payload={
 user:this.state.username,
 password:this.state.password
 }
 axios.post(apiBaseUrl, payload, config)
 .then(function (response) {
 console.log(response);
 if(response.data.responseCode == 0){
 console.log("Login successfull");
 isloggedin = true;
 this.props.history.push("../mainscreen");
 const { token} = response.data;
 localStorage.setItem('token',token);

}
 else if(response.data.code == 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);
 });
 }
 componentWillMount(){

  }
  render() {

    return (
      <div className="App">
          <Router>
      <Layout fixedHeader>
       <Content>
                 <br/>
                 <img src={lo} style={style}/>
                 <br/>
               <Textfield
             label="Username"
             floatingLabel
             value = {this.state.username}
              style={{width: 'auto',display: 'block'}}
             onChange = {e => this.setState({username: e.target.value})}
             />
           <br/>
             <Textfield
               type="password"
               label="Password"
               floatingLabel
               value = {this.state.password}
                style={{width: 'auto',display: 'block',margin: '-3px'}}
               onChange = {e => this.setState({password: e.target.value})}
               />
             <br/>
             <Button raised accent ripple primary={true} style={style} onClick={(event) => this.handleClick(event)}>Login</Button>

                </Content>
                </Layout>
                </Router>
      </div>
    );
  }
}
const style = {flex: 1,
        flexDirection:'row'
};
export default login;

这是我的app.js

import React, { Component } from 'react';
import './App.css';
import Login from './login';
import mains from './mainscreen';

class App extends Component {
   constructor(props){
    super(props);
    this.state={
      loginPage:[]
    }
  }
  componentWillMount(){
    var loginPage =[];
    loginPage.push(<Login parentContext={this}/>);
    this.setState({
                  loginPage:loginPage
                    })
  }
  render() {
    return (
      <div className="App">
        {this.state.loginPage}
        {this.state.mainscreen}

      </div>

    );
  }
}

export default App;