单击菜单按钮时，将显示CSS菜单，但手机或浏览器的后退按钮应撤消该操作

Question

我正在创建一个ReactJS网站，该网站也将用作渐进式Web应用程序（PWA）。我有一个菜单按钮，当单击它时，它将更改元素的css类，并且它将与trasition一起出现在页面内。我想要的是单击android的后退按钮或ios的后退手势或浏览器上的后退历史记录时，我希望此菜单将其状态恢复为已被隐藏的后退。

我将菜单创建为react类，然后将其绑定到react-router，并且单击菜单按钮时，它会更改url和菜单，然后返回按钮可以正常工作，但这没有任何效果或过渡。我认为，每次单击菜单按钮时也会呈现一个页面，这不是一个好习惯。我希望将其隐藏，然后单击菜单按钮时，将菜单的状态从隐藏更改为显示。另外，我还需要将其作为一项操作进行记录，当单击“后退”按钮时，它将像移动应用程序一样再次隐藏，而不是关闭该应用程序。我不想手动操作历史记录，因为菜单只是众多情况中的一种，而且内置动画模块的按钮种类繁多，而且它们都有不同的翻译类。

<div id="menu-btn fa fa-bars"></div>
<div id="menu-cont" class="hidden"></div>

#menu-cont{
  width:200px
  height:100%;
  position:absolute;
  top:0px;
  transition:left 0.6s;
}
.hidden{
  left:-100%;
}
.shown{
  left:0px;
}

我给了您html和css代码，以了解菜单按钮动画的概念。有办法做出反应吗？也许再次使用<Route path='/menu' component={Menu]/>但在菜单元素上而不是使用<Link to="/menu"/>也许还有另一种方法，它不会在路由器上重新呈现菜单，而只更改this.state变量，并在历史记录备份时更改返回到其初始位置。