如果未定义browserHistory，如何使用react-router-dom进行重定向？

Question

在我的登录组件中，我用Axios向Laravel API发出了一个请求，如果请求成功，则会存储一个“令牌” cookie，我用它来表示用户是否登录。但是，在用户登录后，我希望将他重定向到另一个页面。我尝试使用browserHistory和this.props.history进行重定向，但没有任何效果。

这是我得到的错误：

Login.js:33 Uncaught (in promise) TypeError: Cannot read property 'push' of undefined
    at Login.js:33

这是我的代码，您能帮我找出问题所在吗？

import React, { Component} from 'react'
import {browserHistory} from 'react-router-dom'
import HomepageNavigation from '../../components/navigation/HomepageNavigation';
import Button from '../../components/Button';
import Axios from 'axios';
import ErrorLine from '../../components/ErrorLine'
import * as Cookies from 'js-cookie'

export class Login extends Component {

    constructor(props) {
        super(props);
        this.state = {email: '', password: ''}
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState({
          [name]: value
        });
      }

    handleSubmit(e) {
        e.preventDefault();
        Axios.post('http://localhost:8000/api/login', {email: this.state.email, password: this.state.password}, {headers : {Accept: 'application/json'}})
        .then((success) => {
            Cookies.set('token', success.data.data.token);
            browserHistory.push("/")
        }, (error) => {
            this.setState({'errors' : error.response.data.data})
        });
    }

    render() {
        return (
            <div className="container fullheight">
                <HomepageNavigation />
                <div className="columns has-text-centered">
                    <div className="column is-vcentered is-4 is-offset-4 is-10-mobile is-offset-1-mobile">
                    <h1 className="title">Connexion</h1>
                    <img src={require('../../img/logo.svg')}></img>
                    <form className="login-form user-form fullbox-form" onSubmit={this.handleSubmit}>
                        <input name="email" value={this.state.email} onChange={this.handleChange} type="text" placeholder="Adresse email"></input><br />
                        <input name="password" value={this.state.password} onChange={this.handleChange} type="password" placeholder="Mot de passe"></input><br />
                        {(this.state.errors != undefined) ? Object.keys(this.state.errors).map((key, index) => (<ErrorLine>{this.state.errors[key]}</ErrorLine>)) : ""}
                        <Button type="primary">Se connecter</Button>
                    </form>
                </div>
                </div>
            </div>
        )
    }
}

export default Login

Answer 1

您必须使用withRouter包装组件，然后只有您才能获得this.props.history

并且没有import {browserHistory} from 'react-router-dom'这样的东西>