Реакция компонента обновления при изменении местоположения маршрутизатора

Question

Итак, у меня есть два компонента, один из них - заголовок с панелью поиска.Второй компонент - это страница результатов поиска.

Когда я нажимаю клавишу ввода в строке поиска, я нажимаю на другую страницу

this.props.history.push(`/search/?request=${this.searchBar.value}`);

В первый раз все работает нормально.Он перенаправляет меня на другую страницу, где я получаю поиск от местоположения.Но если я изменю значение в строке поиска и нажму ввод, ничего не произойдет.Итак, что я делаю неправильно, и можете ли вы сказать мне, как будет лучше для его реализации.

Компонент панели поиска

import React from 'react';
import './index.scss';
import { withRouter } from 'react-router-dom';
import queryString from 'query-string';

class SearchBar extends React.Component {
  state = {
    focused: false,
    notEmpty: false,
    searchString: ''
  }

  componentDidMount() {
    const searchRequest = this.props.location.search;
    if (searchRequest) {
      const { request } = queryString.parse(searchRequest);
      this.setState({
        notEmpty: true,
        focused: true,
        searchString: request
      });
      console.log('rerender', request);
    }
  }

  inputChanged = () => {
    const str = this.searchBar.value;
    if (str.length > 0) {
      this.setState({
        notEmpty: true,
        searchString: str
      });
    } else {
      this.setState({
        notEmpty: false,
        searchString: ''
      });
    }
  }

  focus = () => {
    this.setState({ focused: true });
  }

  toBlur = (e) => {
    if (e.currentTarget.value.length < 1) {
      this.setState({ focused: false });
    }
  }

  clearSearchValue = (e) => {
    e.preventDefault();
    this.setState({
      notEmpty: false,
      focused: false,
      searchString: ''
    });
  }

  handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      if (this.searchBar.value === '') return false;
      this.props.history.push(`/search/?request=${this.searchBar.value}`); 
    }
    return false;
  }

  render() {
    const {
      clearSearchValue,
      inputChanged,
      toBlur,
      focus,
      state: {
        focused,
        notEmpty,
        searchString
      }
    } = this;
    return (
      <div>
        <div
          className={`search-bar-wrp ${focused ? 'focused' : ''}`} >
          <span
            ref={(node) => {
              this.placeholder = node;
            }}
            className="search-bar-placeholder">
            <i className="icon-search"/>
            {!notEmpty && (<span>Search</span>)}
          </span>
          <input
            ref={(node) => {
              this.searchBar = node;
            }}
            type="text"
            className="search-bar"
            onFocus={focus}
            onBlur={toBlur}
            onKeyPress={this.handleKeyPress}
            value={searchString}
            onChange={inputChanged}/>
            <button
              onClick={clearSearchValue}
              className={`btn-search-clear ${notEmpty ? 'show' : 'hide'}`}>
            <i className="icon-close"/></button>
        </div>
      </div>
    );
  }
}

export default withRouter(SearchBar);

Компонент страницы поиска

import React from 'react';
import queryString from 'query-string';
import SideTopicsBar from 'UI/common/components/SideTopicsBar';
import PopularContent from 'UI/common/components/PopularContent';
import TopicPost from 'UI/common/components/TopicPost';
import AdvancedSearch from 'UI/common/components/AdvancedSearch';
import UserProfileBar from 'UI/common/components/UserProfileBar';
import { filterSettings, url1, url2 } from './data';
import SearchTabBar from './components/SearchTabBar';
import './index.scss';

class FeedPage extends React.Component {
  state = {
    searchString: ''
  }

  componentDidMount() {
    const searchRequest = this.props.location.search;
    if (searchRequest) {
      const { request } = queryString.parse(searchRequest);
      this.setState({
        searchString: request
      });
      console.log('pageRender', request);
    }
  }

  render() {
    const {
      state: {
        searchString
      }
    } = this;
    return (
      <div className="filter-page-wrp">
        <SearchTabBar requestString={searchString}/>
        <div className="container">
          <div className="row">
            <div className="col-3">
              <AdvancedSearch settings={filterSettings} />
            </div>
            <div className="col-6 center-block">
              <div className="show-people">
                <div className="header">
                  <h6>People</h6>
                  <a href="#">Show All</a>
                </div>
                <div className="user-profile-group">
                  <UserProfileBar verified following />
                  <UserProfileBar verified />
                </div>
              </div>
              <TopicPost url={url1} />
              <TopicPost url={url2} />
            </div>
            <div className="col-3">
              <PopularContent />
              <SideTopicsBar title="Topics" />
              <hr />
              <SideTopicsBar title="Profiles" />
              <hr />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default FeedPage;