Javascript 侧抽屉未关闭

我有一个侧抽屉导航组件，当点击汉堡图标时打开（移动视图）

组件打开时，将显示导航链接。问题是，即使单击链接并加载新页面，侧抽屉仍保持打开状态。单击导航链接时，关闭侧导航的最佳方式是什么？编辑：将componentDidUpdate添加到app.js，侧抽屉仍然不会关闭

//side-drawer.jsx

import React from 'react'
import './side-drawer.css'
import { Link } from 'react-router-dom';

const SideDrawer = props => {

    let drawerClasses = 'side-drawer';
    if (props.show){
        drawerClasses = 'side-drawer open';
    }

    return(
    <nav className={drawerClasses}>
        <div className="side-nav">
            <Link className="side-items" to="/about">ABOUT</Link>
            <Link className="side-items" to="/contact">CONTACT US</Link>
        </div>
    </nav>
    );
};

export default SideDrawer;

---

如果您有条件地将类名应用于SideDrawer组件，您可以这样做

<nav className={props.show ? 'side-drawer open' : 'side-drawer'}>

或者您可以通过以下方式在应用程序组件中有条件地显示组件

return (
    <div style={{height: '100%'}}>
      <Header drawerClickHandler={this.drawerToggleClickHandler}/>
        {
          this.state.sideDrawerOpen && <SideDrawer />
        }
        <Switch>
          <Route exact path='/' component={Homepage}/>
          <Route exact path='/about' component={About}/>
          <Route exact path='/contact' component={Contact}/>
        </Switch>
      <Footer/>

    </div>
  );

返回(
{
this.state.sideDrawerRopen&&
}
);

以下是完整的解决方案

您需要一个特定的处理程序来关闭sideDrawer和一些css更改

sideDrawer.js

从“React”导入React；
从“/side drawer.module.css”导入样式；
从“react router dom”导入{Link}；
const SideDrawer=（道具）=>{
让抽屉分类=[style.sideDrawer，style.Close]；
如果（道具秀）{
抽屉类=[style.sideDrawer，style.Open]；
}
返回(
关于
联系我们
);
};
导出默认侧抽屉您好，已尝试此操作，但无效。侧导航上的链接根本没有显示。您是否测试了单击处理程序以确保它切换
show
state？@mochinmuffin提供了side drawer.css。。看起来很简单，但我需要cssfile@NihalChandwani added@Jason单击处理程序在我只更新：in side-drawer.jsx时工作。当我向app.js添加{this.state.sidepaureropen&&}时，会清除链接。
<nav className={props.show ? 'side-drawer open' : 'side-drawer'}>

return (
    <div style={{height: '100%'}}>
      <Header drawerClickHandler={this.drawerToggleClickHandler}/>
        {
          this.state.sideDrawerOpen && <SideDrawer />
        }
        <Switch>
          <Route exact path='/' component={Homepage}/>
          <Route exact path='/about' component={About}/>
          <Route exact path='/contact' component={Contact}/>
        </Switch>
      <Footer/>

    </div>
  );