Impossible de rediriger avec REACT-ROUTER-DOM

Question

J'ai cette méthode de recherche où je veux rediriger l'utilisateur après la recherche. Le problème est que ça ne fait rien et je ne sais pas pourquoi. this.props.history EST défini mais la propriété "location" de l'objet "history" ne semble pas changer en conséquence de ce que je mets dans les paramètres de la méthode push ('./connexion') ... L'URL ne ne change pas. La méthode de recherche IS est liée et j'utilise export default withRouter(SearchBar); pour accéder à l'historique via les accessoires. Sachant que j'utilise exactement la même chose (this.props.history.push() et withRouter) dans d'autres fichiers et qu'il fonctionne correctement ... J'utilise "react-router-dom": "^4.1.1" avec 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'); 
    } 
} 
} 

fichier complet:

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

Merci beaucoup!

Answer 1

Je suppose que vous utilisez le routeur de réaction v4. Cette version du routeur de réaction s'est déplacée vers une approche beaucoup plus déclarative qu'avant. Comment ce changement affecte-t-il la redirection? Le moyen le plus simple de rediriger serait de rendre <Redirect> réagir au composant du routeur. Alors, comment ça va fonctionner? Votre recherche une fois terminée changerait la partie d'état searchResult: de faux à par exemple la liste des résultats. Cela provoquerait un redécoupage. Vos composants seraient quand ils trouvent une valeur non fausse dans state.searchResult rendrait le composant <Redirect> pointant vers votre route de résultats de recherche.

J'ai été vague au sujet de la gestion d'état puisqu'il y a beaucoup de manières de manipuler l'état dans l'application de réaction.

Vous pouvez regarder la authentication example in react router docs qui fait à peu près même chose que vous avez besoin (il effectue uniquement authenitcation au lieu de la recherche)