Reactjs Drawer不在每个页面上打开

如何解决Reactjs Drawer不在每个页面上打开

我在每个页面上都有一个导航栏作为标题，并且导航栏上有一个抽屉按钮，但是只有在将onClick函数添加到每个页面时，抽屉才会打开，如下所示。如何在不打开导航栏的情况下打开抽屉，而无需重复相同的代码？

class ProductPage extends React.Component {
  state = {
    shoppingCartOpen: false,};
  drawerToggleClickHandler = () => {
    this.setState((prevstate) => {
      return { shoppingCartOpen: !prevstate.shoppingCartOpen };
    });
  };

  render() {
    let shoppingCartDrawer;
    if (this.state.shoppingCartOpen) {
      shoppingCartDrawer = <ShoppingCartDrawer />;
    }
    return (
      <ProductStyling>
        <ButtonAppBar drawerClickHandler={this.drawerToggleClickHandler} />
        {shoppingCartDrawer}

我将导航栏添加到app.js中，以便它显示在每个页面上，但是我无法启动抽屉onclick事件