隱藏菜單並在單擊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>

當我單擊鏈接時，它將在后台加載頁面，但菜單沒有關閉，並且在控制台中出現錯誤：

無法在已卸載的組件上執行React狀態更新。

Answer 1

問題是這樣的

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

當您單擊Link ，它不會等到任何關聯的單擊處理程序執行onClick={this.turnOff} （在您的情況下為onClick={this.turnOff} 。 它將直接導航到路徑為/about組件，並且組件將unmounts 。 組件unmounts ，您的turnOff函數會嘗試更改狀態，這是不可能的。

除了Link您還可以使用簡單的button （樣式為鏈接），

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

您可以在setState的回調中使用react-router-dom包中的Redirect 。

您的功能應該是

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)