将元素添加到 Active NavLink React

Question

我正在尝试在导航下方添加一个点 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);
}

Answer 1

忽略NavLink里面的div中的activeClassName（activeClassName只对NavLink有效）。您必须通过以下方式定位它：

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

将元素添加到 Active NavLink React

Adding element to Active NavLink React

reactjs

menubar