如何关闭更改路线的导航菜单

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