ユーザーがreact-router-domの[戻る]ボタンをクリックしたときのコンポーネントの状態の変更方法は？

Question

私は会社のための小さなダッシュボードを構築しています。私はアプリケーション全体にルータを持っており、/のパスには、同じダッシュボード内の別のページを移動するために5 <Link />が表示されています。達成したいのは、アプリケーションの別のセクションに入るときに、これらのタグを隠さなければならないということです。私は状態を変えることでこれをやっていて、大丈夫です。

BUT！実際の問題は、状態が変化していないため、戻るボタンを押したときに発生します。たとえば、の患者をクリックすると、visibleMenuの状態がfalseに変更され、メニューが非表示になります。ダッシュボードをクリックすると、visibleMenuの状態が再びtrueに変わります。戻るボタンをクリックすると、visibleMenuの状態は、戻るボタンをクリックする前の状態と同じになります。

react-router-domで戻るボタンを操作する方法があるので、ユーザーがヒットしたらURLを確認して、visibleMenuの状態にしますか？

ありがとうございました。

EDIT

私はあなたが見するためのいくつかのコードを追加しています。あなたは、私が示すと状態に応じてメニューを非表示にしていますどのように見ることができますがあり

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

：

メニューコンポーネントはこれです。その状態では、ユーザーがページをリロードするかどうか、URLに従って設定するかどうかを確認する必要があります。「/」だけの場合はメニューを表示し、それ以外の場合は表示しません。

私はこのようにやっている：

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

しかし、ユーザーが[戻る]ボタンをクリックした場合、その後の状態は更新されませんので、メニューは表示されません。

Answer 1

[OK]を私に役立つ答えを提供する誰もなかったので、私はちょうどRoutes任意のオプションを宣言する私のWebアプリケーションを再構築しました。

ありがとうございます。