响应式react-sidebar中react-router <Link>绑定onClick函数失效问题求解

问题根因 #

• 侧边栏关闭后不跳转：toggleOpen方法中调用了ev.preventDefault()，阻止了<Link>标签的默认跳转行为。
• 滚动重置不生效：一是使用了不存在的window.scrollToTopAPI，正确API为window.scrollTo(0, 0)；二是React Router单页跳转不会刷新页面，未监听路由变化触发滚动复位。

修复方案 #

1. 修复侧边栏跳转+自动关闭问题 #

修改App.js中相关代码：
首先调整toggleOpen方法，移除不必要的默认行为阻止，同时将汉堡菜单从<a>标签改为语义更合适的<button>标签，避免额外跳转问题：

// 修改toggleOpen方法
toggleOpen() {
  this.setState({ open: !this.state.open });
}

// 修改汉堡菜单渲染逻辑
const contentHeader = (
  <div>
    {!this.state.docked && (
      <button 
        onClick={this.toggleOpen} 
        style={{border: 'none', background: 'transparent', fontSize: '20px', cursor: 'pointer'}}
      >
        =
      </button>
    )}
  </div>
);

注意需要给sidebar_content.js中所有的侧边栏导航链接都绑定onClick={toggleOpen}，才能实现所有链接点击后都自动关闭侧边栏，示例如下：

<Nav.Link as={Link} to="/resource" onClick={toggleOpen}>
  Resource Requisition
</Nav.Link>

2. 修复路由跳转滚动复位问题 #

首先导入withRouter高阶组件包裹App，监听路由变化触发滚动复位：

// 新增导入
import { Switch, Route, withRouter } from "react-router-dom";

// App组件内新增生命周期方法
componentDidUpdate(prevProps) {
  // 路由路径变化时复位滚动位置
  if (this.props.location.pathname !== prevProps.location.pathname) {
    window.scrollTo(0, 0);
  }
}

// 修改导出语句
export default withRouter(App);

内容的提问来源于stack exchange，提问作者Junaid Shaikh