Как установить активный элемент панели навигации на основе пути, если путь начинается с того же слова в реакции

Question

Необходимо установить активное свойство css для активного элемента панели навигации на основе пути. Проблема в том, что два пути - это "/ dashboard" и "dashboard / repositories". В результате обе иконки для панели мониторинга и панели мониторинга / репозиториев становятся активными

    return (
      <div>
        <Sidebar className='sidebar'>
          <div className={styles['sidebar_logo']}>
            <img src={require('../../../img/logo.svg')} alt='logo'/>
          </div>
          {this.renderMenu()}
        </Sidebar>
      </div>
    )

-----------
  private renderMenu = () => {
    return (
      <React.Fragment>
        {this.renderMenuItem('/dashboard', 'Dashboard')}
        {this.renderMenuItem('/dashboard/repositories', 'Repositories')}
        {this.renderMenuItem('/collections', 'Collections')}
        {this.renderMenuItem('/user-management', 'User Management')}
        {this.renderMenuItem('/settings', 'Settings')}
        {this.renderMenuItem('/account', 'Account')}
      </React.Fragment>
    )
  }

----------------
  renderMenuItem = (route: string, title: string) => {
    const isActive = this.getActiveRoute(route)
    return (
      <div className={[styles['navLink'], styles[`${isActive && 'navLink_active'}`]].join(' ')}>
        <NavLink to={route}>
          {this.getNavIcon(route, isActive)}
        </NavLink>
      </div>
    )
  }

-----------------
  @action
  private getActiveRoute = ((route: string) => {
    return this.props.location.pathname.includes(route)
  })