REACT this.props.history.push不重定向

Question

我有這種搜索方法，我想在搜索后重定向用戶。 問題是它沒有做任何事情，我不知道為什么。 this.props.history已定義，但對象“history”的“location”屬性似乎沒有相應於我在push方法的參數中放入的內容（'./connexion'）...搜索方法IS binded我使用export default withRouter(SearchBar); 通過道具訪問歷史

 search(event) {
    if (this.state.location === null) {
        this.setState({ geosuggestId: 'geosuggest-input-alert' });
    } else if (this.state.subjects.length === 0) {
        this.setState({ matieresButtonId: 'matieres-button-alert' });
    } else {
        console.log(this.props.parent);
        if (this.props.parent === 'Homepage') {
            console.log(this.props.history);
            this.props.history.push('/connexion');
        }
    }
}

完整檔案：

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import Geosuggest from 'react-geosuggest';
import SearchBySubjectsModal from './modals/search_by_subjects_modal';
import { withRouter } from 'react-router-dom';

/**
 * Search bar for parent to search for profs
 */
class SearchBar extends Component {

constructor(props) {

    super(props);

    this.state = {
        location: null,
        subjects: [],
        level: 'Collège',
        matieresButtonId: 'matieres-button',
        geosuggestId: 'geosuggest-input'
    }

    this.onSuggestSelect = this.onSuggestSelect.bind(this);
    this.setSubjects = this.setSubjects.bind(this);
    this.search = this.search.bind(this);
}

/**
 * if the state for subjects and location is not null, then stop fields warning
 */
componentDidUpdate() {
    if (this.state.subjects.length > 0) {
        if (this.state.matieresButtonId !== 'matieres-button')
            this.setState({ matieresButtonId: 'matieres-button' });
    }
    if (this.state.location !== null) {
        if (this.state.geosuggestId !== 'geosuggest-input')
            this.setState({ geosuggestId: 'geosuggest-input' });
    }
}

/**
 * set the state when choosing a location
 * @param {*} suggest 
 */
onSuggestSelect(suggest) {
    this.setState({ location: suggest });
}

/**
 * set the state when choosing subjects
 * @param {*} suggest 
 */
setSubjects(subjects, level) {
    this.setState({ subjects, level });
}

/**
 * Search method
 * Check if subjects or location are null (is so, show warnings)
 * If no warnings, perform search and redirect to search page
 * @param {*} event 
 */
search(event) {
    if (this.state.location === null) {
        this.setState({ geosuggestId: 'geosuggest-input-alert' });
    } else if (this.state.subjects.length === 0) {
        this.setState({ matieresButtonId: 'matieres-button-alert' });
    } else {
        console.log(this.props.parent);
        if (this.props.parent === 'Homepage') {
            console.log(this.props.history);
            this.props.history.push('/connexion');
        }
    }
}

/**
 * Uses GeoSuggest (google places api) to choose a town
 * Uses Search By Subject modal to choose subjects
 */
render() {
    return (
        <div className="container" id="search-bar" >
            <div className="text-center">
                <form action="">
                    <div className="row">
                        <div className="col">
                            <Geosuggest
                                queryDelay={150}
                                autoActivateFirstSuggest={true}
                                inputClassName={this.state.geosuggestId}
                                placeholder="Où ?"
                                country="fr"
                                onSuggestSelect={this.onSuggestSelect} />
                        </div>
                        <div className="col">
                            <Link to="/">
                                <button data-toggle="modal" data-target=".choose-subject-modal" className="btn clickable" id={this.state.matieresButtonId}>
                                    <i className="fa fa-graduation-cap"></i>  Matières ?
                                </button>
                            </Link>
                        </div>
                        <div className="col">
                            <Link to="/">
                                <button type="submit" className="btn clickable" id="search-button" onClick={this.search}>
                                    <h5 id="search-btn-txt"><i className="fa fa-search"></i>  Trouver</h5>
                                </button>
                            </Link>
                        </div>
                    </div>
                </form>
                <SearchBySubjectsModal search={this.search} location={this.state.location} setSubjects={this.setSubjects} />
            </div>
        </div>
    );
};
}





export default withRouter(SearchBar);

謝謝您的回答 ：）

Answer 1

嘗試使用just： hashHistory.push('/your/path');

在你的頭腦中： import { hashHistory } from 'react-router';

Answer 2

反應路由器v4的方式是正確的。 withRouter會將歷史對象公開給包裝組件。 只是為了確保您創建歷史對象並將其提供給路由器組件。