Reactjs Can'；t使用REACT-ROUTER-DOM重定向

我有一个搜索方法，我想在搜索后重定向用户。问题是它没有任何作用，我不知道为什么。this.props.history已定义，但对象“history”的“location”属性似乎不会随着我在push方法（'./connexion'）的参数中输入的内容而相应更改。。。URL也不会改变。搜索方法是绑定的，我使用

exportdefaultwithrouter（搜索栏）通过道具访问历史记录。知道我在其他文件中使用了完全相同的东西（this.props.history.push（）和withRouter），并且工作正常。。。我使用带有浏览器历史记录的“^4.1.1”

“react router dom”：

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);

import React，{Component}来自'React'；
从“redux form”导入{Field，reduxForm}；
从'react router dom'导入{Link}；
从'react redux'导入{connect}；
从“react Geosuggest”导入Geosuggest；
从“/modals/search_by_subjects_modal”导入SearchBySubjectsModel；
从“react router dom”导入{withRouter}；
/**
*用于搜索profs的父级的搜索栏
*/
类搜索栏扩展组件{
建造师（道具）{
超级（道具）；
此.state={
位置：空，
主题：[]，
级别：“Collège”，
matieresButtonId:“matieres按钮”，
geosuggestId:“geosuggest输入”
}
this.onSuggestSelect=this.onSuggestSelect.bind（this）；
this.setSubjects=this.setSubjects.bind（this）；
this.search=this.search.bind（this）；
}
/**
*如果主题和位置的状态不为空，则停止字段警告
*/
componentDidUpdate（）{
如果（this.state.subjects.length>0）{
if（this.state.matieresButtonId！=“matieres按钮”）
this.setState（{matieresButtonId:'matieres button'}）；
}
if（this.state.location！==null）{
if（this.state.geosuggestId！==“geosuggest输入”）
this.setState（{geosuggestId:'geosuggest input'}）；
}
}
/**
*设置选择位置时的状态
*@param{*}
*/
onSuggestSelect（建议）{
this.setState（{location:suggest}）；
}
/**
*设置选择主题时的状态
*@param{*}
*/
设置科目（科目、级别）{
this.setState（{subjects，level}）；
}
/**
*搜索方法
*检查主题或位置是否为空（为空，显示警告）
*如果没有警告，请执行搜索并重定向到搜索页面
*@param{*}事件
*/
搜索（事件）{
if（this.state.location==null）{
this.setState（{geosuggestId:'geosuggest input alert'}）；
}else if（this.state.subjects.length==0）{
this.setState（{matieresButtonId:'matieres button alert'}）；
}否则{
console.log（this.props.parent）；
如果（this.props.parent=='Homepage'）{
console.log（this.props.history）；
this.props.history.push（'/connexion'）；
}
}
}
/**
*使用GeoSuggest（google places api）选择城镇
*使用“按主题搜索”模式选择主题
*/
render（）{
返回(
马蒂埃？
裤管
);
};
}
使用路由器导出默认值（搜索栏）；

---

多谢各位

我假设您使用的是react路由器v4。这个版本的react路由器已经转向比以前更具声明性的方法。这种转变如何影响重定向？最简单的重定向方法是呈现

react路由器组件。那么，整个过程是如何运作的呢？您的搜索一旦完成，将把状态部分

searchResult:

从false更改为例如结果列表。这将导致重新加载。当组件在状态中找到非false值时，它们将返回。searchResult将呈现指向搜索结果路径的

组件

我一直对状态处理含糊不清，因为在react应用程序中有许多处理状态的方法

---

您可以查看，它的功能与您所需的几乎相同（它只执行AuthenitAction而不是搜索）

您好，谢谢您的回答！我在想，但在我看来，这似乎是一种黑客行为：）对我来说也很奇怪的是，这种方式在其他组件中非常有效，但在这个组件上不起作用：我不认为这是黑客行为，它可能看起来很奇怪，直到人们习惯了典型的反应方式：用户操作不会导致直接的ui更改，用户操作导致状态更改，然后组件根据新状态进行相应的反应，