Изменение маршрута реакции без NavLink

Question

У меня две страницы.Первая - это домашняя страница и панель поиска.Второй - страница со списком, в которой отображаются элементы, в которых был произведен поиск.

<BrowserRouter>
  <div>
    <ScrollToTop>
      <Route exact path="/" component={Home}/>
      <Route path="/tours/" component={Items}/>
    </ScrollToTop>
  </div>
</BrowserRouter>

в Items.js, у меня есть еще один компонент для меню поиска.

<SearchOverlayMenu/>

и в SearchOverlayMenu Iу меня есть простой компонент формы с именем SearchOverlayMenuForm, подобный этому

<div className="text-right">
  <button onClick={this.handleFormSubmit}>
    <i className="fa fa-search"></i>
  </button>
  <input id="query" className="bfont text-right" name="q" type="search"/>
</div>

Моя проблема в том, что когда я набираю ключевое слово в запросе и нажимаю кнопку «Отправить», я не могу использовать NavLink, и у меня также нет доступана this.history.push(...);

, и это моя функция handleformsubmit в компоненте SearchOverlayMenuForm:

handleFormSubmit() {
    let query = document.getElementById('query').value;
    console.log(query);
    let newurl = '/tours/?q=' + query;
    this.history.push(newurl);
}

Как перенаправить пользователей на целевой URL?