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

Question

因此，我正在建立一个网站，并为导航链接创建了一个移动抽屉，当我单击其中带有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>

drawer.js

         <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>

Answer 1

您的<Router>呈现在app.js中的组件内部，因此更改页面不会触发卸载或重置状态。但是，您可以在componentDidUpdate中检测到页面更改，并使用它来手动关闭抽屉：

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

附加阅读：https://reacttraining.com/react-router/web/api/history/history-is-mutable