javascript - 单击 react-router 链接时隐藏菜单并重定向

Question

对于我网站的菜单，我使用链接。当单击菜单汉堡包图标时，会出现悬停在菜单上的复选框。现在我想在单击链接并转到另一页后隐藏菜单。但是菜单没有关闭，菜单后面的页面发生了变化，这很好。我设置了一个将复选框状态更改为 false 的函数，但它不会在单击链接时隐藏菜单。

constructor(props) {
  super(props);
  this.state = {
    hamburger: false
  };
  this.turnOff= this.turnOff.bind(this);
}

turnOff = (e) => {
    this.setState({hamburger:false});
}

在 render() 中我有:

<input name="hamburger" type="checkbox" id="menuToggle" onChange={this.handleChange} checked={this.state.hamburger} className="menu-toggle-input"></input>
<Link to="/about" onClick={this.turnOff}>About</Link>

当我点击链接时，它会在后台加载页面，但菜单不会关闭，并且我在控制台中收到错误消息:

Can't perform a React state update on an unmounted component.

Answer 1

问题是这样的，

<Link to="/about" onClick={this.turnOff}>About</Link>

当您点击 Link 时，它不会等到任何关联的点击处理程序执行，在您的例子中是 onClick={this.turnOff}。它将直接导航到路径为 /about 的组件，并且您的组件 unmounts。组件 卸载 后，您的 turnOff 函数会尝试更改不可能的状态。

您可以使用简单的按钮(样式为链接)代替Link，

<button onClick={this.turnOff}>About</button> 

您可以使用 Redirect来自 react-router-dom 包，在 callback 中设置状态。

你的功能应该是，

turnOff = (e) => {
    this.setState({hamburger:false}, () => <Redirect to="/about" />);
}

更新

你可以使用history对象，

turnOff = (e) => {
    this.setState({hamburger:false}, () => this.props.history.push('/about'));
}

您需要从 react-router-dom 导入 withRouter 并用它包装您的组件。

import { withRouter } from 'react-router-dom';


export default withRouter(Your_Component_name)