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

Question

使用"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>

模板：

SELECT * FROM (VALUES('WOMENS'),('MENS'),('CHILDRENS')) as X([Attribute])
,(VALUES(742),(318)) AS z([StoreID])

截图：

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