时间戳

首页 > 解决方案 > 如何通过下拉链接在 React 上使用 NavLink-activeStyle

reactjs - 如何通过下拉链接在 React 上使用 NavLink-activeStyle

问题描述

我在调整 bootstrap 4 导航栏以做出反应时遇到问题。我有以下代码：

<li className="nav-item">
     <NavLink className="nav-link" to="/home" activeStyle={{ color: 'black' }}>Home</NavLink>
</li>
<li className="nav-item dropdown">
    <a className="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Subjects
    </a>
    <div className="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
        <NavLink className="dropdown-item" to="/subjectA">Subject A</NavLink>
        <NavLink className="dropdown-item" to="/subjectB">Subject B</NavLink>
        <NavLink className="dropdown-item" to="/subjectC">Subject C</NavLink>  
    </div>
</li>
<li className="nav-item">
    <NavLink className="nav-link" to="/about" activeStyle={{ color: 'black' }}>About</NavLink>
</li>

我希望选择主题时“主题”变为黑色。我知道我可以使用单击事件，但我希望它在刷新页面时也保持黑色。这是由于 NavLink 的 activeStyle 而在其他元素上发生的情况，但似乎我不能在“主题”元素上以相同的方式使用它。

知道我该怎么做吗？

标签： reactjsroutingbootstrap-4dropdown

解决方案

我认为你可以这样做：

const activeStyle = { color: "#000000" };
<li className="nav-item">
    <NavLink className="nav-link" to="/home" activeStyle={activeStyle} exact>Home</NavLink>
</li>
<li className="nav-item dropdown">
    <a className="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Subjects
    </a>
    <div className="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
        <NavLink className="dropdown-item" to="/subjectA" activeStyle={activeStyle}>Subject A</NavLink>
        <NavLink className="dropdown-item" to="/subjectB" activeStyle={activeStyle}>Subject B</NavLink>
        <NavLink className="dropdown-item" to="/subjectC" activeStyle={activeStyle}>Subject C</NavLink>  
    </div>
</li>
<li className="nav-item">
    <NavLink className="nav-link" to="/about" activeStyle={activeStyle}>About</NavLink>
</li>
  • activeStyle 变量只是帮助你不要重复相同的字符串
  • "/home" 上的第一个 "exact" 字符串将确保只有确切的路径才能获得您想要的颜色，因为您的所有路径都彼此非常不同，您可以跳过它，这只是在您使用例如 "/ “这也是其他路线的一部分。
  • 您的代码中唯一真正重要的缺失部分是 /subjectX 路由上的 activeStyle={activeStyle} 部分。

推荐阅读