Comment changer les états d'un composant lorsque l'utilisateur clique sur le bouton de retour sur reac-router-dom?

Question

Je construis un petit tableau de bord pour une entreprise. J'ai un routeur dans l'ensemble de l'application et dans le chemin /, je montre 5 <Link /> pour parcourir différentes pages à l'intérieur du même tableau de bord. La chose que je voulais réaliser est que je dois cacher ces balises <Link /> en entrant une section différente de l'application. Je le fais en changeant d'état et ça marche bien.

MAIS! Le vrai problème vient quand j'appuie sur le bouton de retour, parce que l'état ne change pas. Exemple, lorsque je clique sur Les patients l'état visibleMenu passe à false pour masquer le menu. Lorsque je clique sur le tableau de bord, l'état visibleMenu redevient true. Lorsque je clique sur le bouton Précédent, l'état visibleMenu reste le même qu'avant de cliquer sur le bouton Précédent.

Existe-t-il un moyen de gérer la touche de retour avec , donc quand un utilisateur revient, je peux vérifier le changement d'URL et définir l'état visibleMenu en conséquence?

Merci d'avance les gars.

EDIT

J'ajoute un code pour vous de voir.

Le composant de menu est la suivante:

 <div className={this.props.className}> 
      <div> 
       <ul className={'dashboardLinks ' + (this.state.visibleMenu ? 'show' : 'hide')}> 
        <li> 
         <Link to="/patients" className="br10 sh1 anim-1" onClick={this.hideMenu}> 
          <span className="fa fa-users"></span> 
          Patients 
         </Link> 
        </li> 
        <li> 
         <Link to="/filter" className="br10 sh1 anim-1" onClick={this.hideMenu}> 
          <span className="fa fa-filter"></span> 
          Filter Data 
         </Link> 
        </li> 
        <li> 
         <Link to="/search" className="br10 sh1 anim-1" onClick={this.hideMenu}> 
          <span className="fa fa-search"></span> 
          Quick Search 
         </Link> 
        </li> 
        <li> 
         <Link to="/account" className="br10 sh1 anim-1" onClick={this.hideMenu}> 
          <span className="fa fa-user"></span> 
          My Account 
         </Link> 
        </li> 
        <li> 
         <a href="#logout" className="br10 sh1 anim-1" onClick={this.props.logout}> 
          <span className="fa fa-sign-out"></span> 
          Logout 
         </a> 
        </li> 
       </ul> 
       <Route path="/patients" component={Patients}></Route> 
       <Route path="/patients/:id" component={PatientInfo}></Route> 
       <Route path="/filter" component={Filter}></Route> 
       <Route path="/search" component={Search}></Route> 
       <Route path="/account" component={Account}></Route> 
      </div> 
     </div> 

Là, vous pouvez voir comment j'afficher et masquer le menu en fonction d'un état. Cet état j'ai besoin de vérifier si l'utilisateur recharge la page, de la définir en fonction de l'URL, si c'est seulement "/" puis afficher le menu, sinon, ne pas le montrer.

Je fais comme ceci:

componentWillMount() { 
    var url = window.location.pathname; 
    if(url === '/') { 
     this.setState({ 
      visibleMenu: true 
     }); 
    } else { 
     this.setState({ 
      visibleMenu: false 
     }); 
    } 
} 

Mais si l'utilisateur clique sur le bouton de retour alors l'état est pas mis à jour, de sorte que le menu ne sera pas affiché.

Answer 1

OK, car il n'y avait personne fournissant une réponse qui pourrait m'aider, je viens de re-structuré mon application web, pour déclarer Routes pour toute option.

Merci quand même.