Компонент React update при изменении поиска местоположения роутера

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

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

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

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

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

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.info('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.info('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;