如何關閉更改路線的導航菜單

Question

使用react-router-dom時，如何檢測用戶何時導航到新頁面？

我目前使用的是"react-router-dom": "^4.2.2"和"react": "^15.6.1"。我想在用戶選擇新的目標網址時關閉手機導航菜單，但我無法檢測路由何時發生變化。

是否有回撥我可以掛鉤爲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}); 
}