Question

我在调整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>

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

知道我该怎么做吗？

Answer 1

我认为您可以这样做：

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”上的第一个“精确”字符串将确保只有确切的路径才能获得所需的颜色，因为所有路径彼此之间都非常不同，可以跳过这一点，只有在使用的情况下例如“ /”也是其他路线的一部分。
代码中唯一真正重要的缺失部分是/ subjectX路由中的activeStyle = {activeStyle}部分。

如何在带有下拉链接的React上使用NavLink-activeStyle

1 个答案: