Javascript 单击链接时导航抽屉未关闭

所以我正在制作一个网站，我为我的导航链接制作了一个移动抽屉，当我点击有3行的按钮并关闭它时，它可以正常打开，我做了一个背景，但现在当我点击一个链接进入下一页时，导航抽屉没有关闭，要关闭它，我必须点击背景屏幕，我希望抽屉在我点击页面链接时关闭

app.js

  state = {
    sideDrawerOpen: false
  };

  drawerToggleClickHandler = () => {
    this.setState((prevState) => {
      return { sideDrawerOpen: !prevState.sideDrawerOpen };
    });
  };

  backdropClickHandler = () => {
    this.setState({ sideDrawerOpen: false });
  };

  render() {
    let backdrop

    if (this.state.sideDrawerOpen) {
      backdrop = <Backdrop click={this.backdropClickHandler} />
    }
    return (
      <Router>
        <div className="App">
          <div style={{ height: '100%' }}>
            <Toolbar drawerClickHandler={this.drawerToggleClickHandler} />
            <SideDrawer show={this.state.sideDrawerOpen} />
            {backdrop}
            <Route exact path='/' component={Home} />
            <Route exact path='/Contact' component={Contact} />
            <Route exact path='/Events' component={Events} />
            <Route exact path='/About' component={About} />
            <Route exact path='/Gallery' component={Gallery} />
          </div>
        </div>
      </Router>

         <nav>
            <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/About">About</Link></li>
                <li><Link to="/Events">Events</Link></li>
                <li><Link to="/Gallery">Gallery</Link></li>
                <li><Link to="/Contact">Contact</Link></li>
            </ul>
        </nav>

您的

在

app.js

的组件中呈现，因此更改页面不会触发卸载或重置您的状态。但是，您可以在

componentDidUpdate

中检测到页面更改，并使用该更改手动关闭抽屉：

componentDidUpdate(prevProps) {
  const { location } = this.props;
  if (location !== prevProps.location && this.state.sideDrawerOpen) {
    this.setState({ sideDrawerOpen: false });
  }
}

补充阅读：