将元素添加到 Active NavLink React

Adding element to Active NavLink React

我正在尝试在导航下方添加一个点 link。因此,当聊天处于活动状态时,它应该是“聊天”一词下方的一个点,当配置文件处于活动状态时,“个人资料”下方的单词应该是一个点,而在“聊天”下方 - 什么都没有。 在我的版本中,我看不到点。 在最终版本中,一个菜单 link 和一个点应该是 flex-direction: column; 对齐项目:居中; (我会用 flex 做)


const FooterChatProfile = () => (
<nav className="footer-chat-profile">
  <NavLink
  exact
  activeClassName="footer-link-active"
  className="footer-link"
  to="/Overview"
  >Chat
    <div 
    activeClassName="footer-dot-active"
    className="footer-dot"
      to="/Overview"> </div>
  </NavLink>
  <NavLink
  activeClassName="footer-link-active"
  className="footer-link"
  to="/profile"
  >
    Profile
    <div 
    activeClassName="footer-dot-active"
    className="footer-dot"
      to="/profile"> </div>
    
  </NavLink>
</nav>
)

export default FooterChatProfile; 

And CSS

.footer-link {
  cursor: pointer;
  text-decoration: none;
  color: #181818;
  border-bottom: 3px solid transparent;
}

.footer-link-active {
  /* border-bottom: 3px solid #3e99c0; */
  transition: border-bottom .5s ease-in-out;
  font-weight: bold;
}

.footer-dot-active {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #3e99c0;
  
}
.footer-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color:rgb(255, 255, 255);
}

忽略NavLink里面的div中的activeClassNameactiveClassName只对NavLink有效)。您必须通过以下方式定位它:

.footer-link-active > .footer-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #3e99c0;
}