無法使用REACT-ROUTER-DOM重定向

Question

我有搜索方法，我想在搜索後重定向用戶。問題是它沒有做任何事情，我不知道爲什麼。 this.props.history被定義，但對象「歷史」的「位置」屬性似乎並沒有因爲我在push方法（'./connexion'）的參數中放置而改變...... URL沒有既不改變。搜索方法是綁定的，我使用export default withRouter(SearchBar);通過道具訪問歷史記錄。知道我在其他文件中使用完全相同的東西（this.props.history.push（）和withRouter），並且它工作正常......我使用"react-router-dom": "^4.1.1"和browserHistory。

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

我假設你正在使用react-router v4。這個版本的響應路由器已經轉向比以前更多的聲明式方法。這種轉變如何影響重定向？最簡單的重定向方法是呈現<Redirect>反應路由器組件。那麼整個事情將如何工作？一旦完成搜索，會將狀態部分searchResult:從false更改爲結果列表。這會導致重投。您的組件在state.searchResult中發現非假值時會呈現<Redirect>組件，指向您的搜索結果路線。

我一直模糊狀態處理，因爲有很多方法來處理狀態反應的應用程序。

你可以看看它做，因爲你需要幾乎同樣的事情authentication example in react router docs（只執行authenitcation而不是搜索）