我正在尝试使用 this.history.push 重定向到另一个页面，但它不起作用

Question

我使用 this.context.history.push 重定向到另一个页面，但它不起作用。请问有什么解决办法吗？ 我使用 laravel 作为后端并将 js 作为前端现在我想将我的登录页面重定向到供应商配置文件，但它不起作用。 这是我的 vendorlogin.jsx

import React from 'react'
import { vendorlogin } from '../API/UserAPI'
export default class VendorLogin extends React.Component {
    constructor() {
        super()
        this.state = {
            email: '',
            password: '',
            redirect:false

        }

        this.onChange = this.onChange.bind(this)
        this.onSubmit = this.onSubmit.bind(this)
    }

    onChange(e) {
        this.setState({ [e.target.name]: e.target.value })
    }
    onSubmit(e) {
        e.preventDefault()

        const vendor = {
            email: this.state.email,
            password: this.state.password
        }

        vendorlogin(vendor).then(res => {
            if (res){
                this.context.history.push('/vp');
            }

            else{
                console.log("login error");
            }
        });
    }

    render() {

        return (
            <div className="container">
                <div className="row">
                    <div className="col-md-6 mt-5 mx-auto">
                        <form noValidate >
                            <h1 className="h3 mb-3 font-weight-normal">
                                Please sign in
                            </h1>
                            <div className="form-group">
                                <label htmlFor="email">Email address</label>
                                <input
                                    type="email"
                                    className="form-control"
                                    name="email"
                                    placeholder="Enter email"
                                    value={this.state.email}
                                    onChange={this.onChange}
                                />
                            </div>
                            <div className="form-group">
                                <label htmlFor="password">Password</label>
                                <input
                                    type="password"
                                    className="form-control"
                                    name="password"
                                    placeholder="Password"
                                    value={this.state.password}
                                    onChange={this.onChange}
                                />
                            </div>
                        </form>
                        <button
                            type="submit"
                            value="LOGIN"
                            className="button"
                            onSubmit={this.onSubmit}
                        >LOGIN</button>
                    </div>
                </div>
            </div>
        )
    }
}

这是我的 App.jsx

import React from 'react'
import {BrowserRouter as Router,Route} from 'react-router-dom'
import Home from './components/Main/home';
import { Stsignin } from './components/Student/stsignin';
//import { Vsignin } from './components/Vendor/vsignin';
import VendorProfile from './components/Vendor/profile';
import Panel from './components/Vendor/panel';
import Offer from './components/Vendor/offer';
import Vreport from './components/Vendor/vreport';
import Vp from './components/Vendor/vp';
import VendorLogin from './components/Vendor/vendorlogin';



class App extends React.Component {
  render() {
    return (
      <Router>
      <Route path='/home' component={Home}></Route>
      <Route path='/stsignin' component={Stsignin}></Route>

        <Route path='/panel' component={Panel}></Route>
        <Route path='/profile' component={VendorProfile}></Route>
        <Route path='/offer' component={Offer}></Route>
        <Route path='/vreport' component={Vreport}></Route>
        <Route path='/vp' component={Vp}></Route>
        <Route path='/vendorlogin' component={VendorLogin}></Route>
      </Router>
    );
  }
}

export default App;

这是我的 UserAPi.js

import axios from 'axios'
export const vendorlogin = vendor => {
    return axios
        .post('api/vendorlogin', {
            email : vendor.email,
            password : vendor.password
        }, {
            headers: { 'Content-Type': 'application/json' }
        })
        .then(response => {
            localStorage.setItem('usertoken',response.data.token)
            console.log(response)
        })
        .catch(err => {
            console.log(err)
        })
    }

Answer 1

vendorlogin(vendor).then(res => {
            if (res){
                //this.context.history.push('/vp');
                window.location = '/vp';
            }

            else{
                console.log("login error");
            }
        });