Как использовать NavLink-activeStyle в React с выпадающей ссылкой

Question

У меня проблема с настройкой загрузчика 4 navbar для реакции.У меня есть следующий код:

<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>

Я хочу, чтобы "Предметы" меняли на черный, когда объект выбран.Я знаю, что могу использовать событие щелчка, но я также хочу, чтобы оставалось черным, когда я обновляю страницу .Это то, что происходит с другими элементами из-за activeStyle NavLink, но, похоже, я не могу использовать его таким же образом для элемента "Subjects".

Есть идеи, как мне это сделать?

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 "будет гарантировать, что только точный путь получит нужный вам цвет, так как все ваши пути очень отличаются друг от друга, вы можете пропустить это, это было только в том случае, если вы использовали, например," / ", который является частью других маршрутовтоже.
• Единственная важная недостающая часть в вашем коде - это часть activeStyle = {activeStyle} на ваших / subjectX маршрутах.