Как исправить баг с навигацией?
Перенесите active из NavLink в Nav (кстати, а что там после этого останется? - да ничего, кроме рендеринга a, которому прокидываются props без изменений; получается, что не так уж и нужен этот компонент, проще создавать этот a сразу в Nav), и хранить в нём индекс активного элемента:

state = {
  active: null,
  ...
}
setActive(active) {
  this.setState({ active });
}
{this.state.items.map((n, i) => (
  <li>
    <NavLink
      href="#"
      className={this.state.active === i ? 'active' : ''}
      onClick={() => this.setActive(i)}
    >
      {n}
    </NavLink>
  </li>
))}
тогда вам надо начинать с CSS и Javascript
к реакту ваша проблема не имеет никакого отношения, даже тэг можете убрать
с предыдущими никто не возится, устанавливают основной цвет всем элементам, а потом меняют на активный у текущего