ReactJs - вставьте новый класс CSS в элемент, когда активен конкретный NavLink

У меня есть это приложение. Все работает успешно, кроме того, что я написал в заголовке этого поста.

class PortfolioMenu extends Component {
  isActive= (match, location) => {
    if (match) {
     if (document.querySelector('.portfolio-menu')){
     document.querySelector('.portfolio-menu').className += " new-classjs";
     }
    }
    return match;
  };

  render(){   
    return (
      <div>
        <Router>
          <div class = "wrapper2">
            <div class = "wrapper-portfolio">
              <Route exact path='/portfolio' render = {() => <Intro />} />
              <Route exact path='/portfolio/casas' render = {() => <Casas />} />               
            </div>
            <nav>
              <ul className = "portfolio-menu">
                <li><NavLink activeClassName = "active" isActive = {this.isActive} exact to = "/portfolio">• introdução</NavLink></li>
                <li><NavLink activeClassName = "active" exact to = "/portfolio/casas">• casas</NavLink></li>

              </ul>
            </nav>
          </div>
        </Router>
      </div>
    )
  }
  }


export default PortfolioMenu

Как вы можете видеть в приведенном выше коде, у меня есть эта функция реагирования, которая определяет, активна ли какая-то страница. Эта функция успешно работает. Когда я набираю console.info(page detected) в его теле, он показывает результат

isActive= (match, location) => {
    if (match) {
     if (document.querySelector('.portfolio-menu')){
     document.querySelector('.portfolio-menu').className += " new-classjs";
     }
    }
    return match;

Таким образом, корень проблемы заключается в том, что то, что происходит в этом теле функции, в этом конкретном случае не работает. Я хотел бы суммировать результаты «new-classjs», кроме класса «portfolio-menu»: <ul className = "portfolio-menu new-classjs"">. Как я могу это решить?