title: How to use NavLink-activeStyle on React with a dropdown link
body: <p>I am having a problem adjusting bootstrap 4 navbar to react. I have the following code:</p>
  
  <pre><code>&lt;li className="nav-item"&gt;
       &lt;NavLink className="nav-link" to="/home" activeStyle={{ color: 'black' }}&gt;Home&lt;/NavLink&gt;
  &lt;/li&gt;
  &lt;li className="nav-item dropdown"&gt;
      &lt;a className="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
        Subjects
      &lt;/a&gt;
      &lt;div className="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"&gt;
          &lt;NavLink className="dropdown-item" to="/subjectA"&gt;Subject A&lt;/NavLink&gt;
          &lt;NavLink className="dropdown-item" to="/subjectB"&gt;Subject B&lt;/NavLink&gt;
          &lt;NavLink className="dropdown-item" to="/subjectC"&gt;Subject C&lt;/NavLink&gt;  
      &lt;/div&gt;
  &lt;/li&gt;
  &lt;li className="nav-item"&gt;
      &lt;NavLink className="nav-link" to="/about" activeStyle={{ color: 'black' }}&gt;About&lt;/NavLink&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>I want "Subjects" to change to black when a subject is chosen. I know I can use a click event but I want it also to <strong>stay black when I refresh the page</strong>. This is what happens on the other elements because of the NavLink's activeStyle, but seems like I can't use it the same way on the "Subjects" element.</p>
  
  <p>Any idea how I do that?</p>