Javascript 反应汉堡菜单的Div问题

我正在尝试使用React汉堡菜单中的所有选项，但由于某些原因，我似乎无法正确地选择样式。我的索引页不知何故包含在导航div中，即使切换到其他路线，它仍然是一样的。我相信这很简单。这是我所说的图像：

我已经尝试了所有我能想到的关于CSS的方法，但我就是不能让它正常工作。以下是导航所处的代码：

   render() {
     return (
       <div>
        <Background />
         <Menu>
           <nav className="stroke">
            <ul>
             <div className="menu bm-menu">
              <li>
               <NavLink className="menu-item bm-item" to="/">
                Home
               </NavLink>
              </li>
              <li>
               <NavLink className="menu-item bm-item" to="/portfolio">
                Portfolio
               </NavLink>
              </li>
              <li>
              <NavLink className="menu-item bm-item" to="/contact">
                Contact
              </NavLink>
              </li>
            </div>
          </ul>
        </nav>
      <Route exact path="/" component={Index} />
      <Route path="/portfolio" component={Portfolio} />
      <Route path="/contact" component={Contact} />
      </Menu>
    </div>
   );
  }
 }

还有一些问题，比如ScalerState之类的动画无法将画布推出（particle.js）。我不确定这是否可以做到，但值得一试。我很抱歉问了一个愚蠢的问题。我通常不会问CSS，但我在这里被难住了

---

谢谢

原来这是实际图书馆本身的问题。在Github中发布了一个问题，并转到另一个库

   nav {
     z-index: 1;
     width: 100%;
     align-items: center;
     max-height: 3em;
   }

 .menu {
    list-style-type: none;
    justify-content: flex-end;
    border-bottom: 2px solid transparent;
   background: transparent;
 }

 .menu-item {
   margin-right: 1em;
   color: aliceblue;
   font-size: 25px;
   font-weight: bold;
   font-family: 'Raleway', sans-serif;
   text-decoration: none;
 }

.menu-item:hover {
 text-decoration-color: aliceblue;
  }

 nav.stroke ul li a,
 nav.fill ul li a {
position: relative;
 }    

 nav.stroke ul li a:after,
  nav.fill ul li a:after {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 width: 0%;
 content: '.';
 color: transparent;
 background: #aaa;
 height: 1px;
}

nav.stroke ul li a:hover:after {
  width: 100%;
}

nav.fill ul li a {
   transition: all 0.5s;
}

nav.fill ul li a:after {
  text-align: left;
  content: '.';
  margin: 0;
  opacity: 0;
}

 nav.fill ul li a:hover {
  color: #fff;
  z-index: 1;
 }

nav.fill ul li a:hover:after {
 z-index: -10;
 animation: fill .1s forwards;
 -webkit-animation: fill .1s forwards;
 -moz-animation: fill .1s forwards;
 opacity: 1;
}

.bm-burger-button {
  position: fixed;
  width: 36px;
  height: 30px;
  left: 36px;
  top: 36px;
 }
 .bm-burger-bars {
   background: #373a47;
  }
 .bm-menu {
  background: #797c88;
  padding: 2.5em 1.5em 0;
  font-size: 1.15em;
  max-width: 80%;
  }
 .bm-morph-shape {
  fill: #797c88;
  max-width: 80%;
 }
 .bm-item {
  display: inline-block;
  margin-bottom: 2%;
  }
.bm-overlay {
  background: rgba(0, 0, 0, 0.3);
 }