ルート変更のナビゲーションメニューを閉じるには

Question

react-router-domを使用すると、ユーザーが新しいページに移動したときをどのように検出できますか？

私は現在"react-router-dom": "^4.2.2"と"react": "^15.6.1"を使用しています。ユーザーが新しいターゲットURLを選択したときにモバイルナビゲーションメニューを閉じたいが、ルートが変更されたときに検出できない。

react-router-domのコールバックがありますか？次のように私は私の現在のコードがあるlocation.onChange(() => { this.state.collapsed = true; })

の線に沿ってコードを呼び出すことができるようにしたいと思います：

コンポーネント：

class Leftnav extends Component { 

constructor() { 
    super(); 
    this.state = { 
     collapsed: true, 
    }; 
    } 

    toggleMenu =() => { 
    this.setState({ 
     collapsed: !this.state.collapsed, 
    }) 
    }; 

    render() { ... { */html here/* } ... }; 
}; 

テンプレート：

<ul className={"leftnav-collapse " + (this.state.collapsed ? 'collapsed' : '')}> 
    <li><NavLink to={`/events`} activeClassName="current">Events</NavLink></li> 
    <li><NavLink to={`/people`} activeClassName="current">People</NavLink></li> 
</ul> 

スクリーンショット：

Answer 1

<NavLink to={`/events`} 
     activeClassName="current" 
     onClick={this.toggleMenu} 
    >Events</NavLink> 

あなたは今もクリックハンドラが適用されていることを、デフォルトのクリックアクションを防ぐためにtoggleMenu機能を更新する必要があるかもしれません。

toggleMenu = (e) => { 
    if (e) { 
     e.preventDefault(); 
    } 
    this.setState({collapsed: !this.state.collapsed}); 
}