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

Question

使用react-router-dom，如何检测用户何时导航到新页面？

我目前正在使用"react-router-dom": "^4.2.2"和"react": "^15.6.1"。我想在用户选择新的目标 URL 时关闭移动导航菜单，但我无法检测路线何时发生更改。

我可以挂接 for 回调吗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

对于OP来说，这已经晚了4年，但是，我最终在这里寻找确切问题的解决方案（尽管使用了较新版本的react和react-router-dom），因此在这里添加我的解决方案以供其他人解决这个问题。

当使用功能组件（这将是今天推荐的方法）时，我们可以使用useLocation(from react-router-dom) 和useEffect(from react) 钩子创建一个解决方案。像下面这样的组件将关闭导航菜单。

function LeftNav() {
  const [isOpen, setOpen] = useState(false);
  const {pathname} = useLocation();

  useEffect(() => {
    setOpen(false); // Close the navigation panel
  }, [ pathname ]);
  
  return ( /* your jsx */ );
}

简短的解释：在上面的组件中，我们从钩子中获取位置对象并从中useLocation提取电流。pathname路径名的值将在用户导航时更新。每当发生这种情况时，钩子useLocation还负责重新渲染组件（由于钩子内的状态更新）。之后我们需要做的就是创建一个 useEffect 挂钩，当路径名更改时关闭菜单。

此模式可用于在基于客户端导航的组件中执行任何操作。

Answer 2

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

toggleMenu既然应用了单击处理程序，您可能还需要更新该函数以防止默认单击操作。

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