Как обновить избыточный магазин при обновлении параметров маршрута

Question

У меня есть домашняя страница с панелью поиска.Когда пользователь выполняет поиск, я запускаю действие 'SEARCH', которое просматривает данные и обновляет хранилище строкой запроса и результатами поиска.Затем я помещаю страницу результатов с параметром запроса в историю реагирующего маршрутизатора, в котором отображаются результаты.

Моя проблема заключается в том, что если кто-то выполнит ответный поиск после выполнения нескольких поисков, URL изменится, чтобы показать другой запросparams, но на самом деле он не будет выполнять поисковое действие и обновлять магазин.

Как я могу гарантировать, что нажатие после нескольких поисков приведет к перемотке магазина или, по крайней мере, к другому поиску для обновления результатов и соответствиязапрос в маршруте?

App.js

import React from 'react';
import { HashRouter, Switch, Route, Redirect } from 'react-router-dom';
import Search from 'Components/Search';
import Results from 'Containers/Results';

export default () => (
    <HashRouter>
        <Switch>
            <Route path="/search" component={Search} />
            <Route path="/results/:query" component={Results} />
            <Route path="/" exact component={Search} />
            <Route render={() => <Redirect to="/" />} />
        </Switch>
    </HashRouter>
);

Search.jsx

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { withRouter } from 'react-router-dom';

const searchActionCreator = (query) => ({
    type: 'SEARCH',
    query
});

class Search extends React.Component {

    constructor(props) {
        super(props);
        this.input = React.createRef();
        this.search = (e) => {
            e.preventDefault();
            props.search(this.input.current.value);
            props.history.push('/results/' + this.input.current.value);
        };
    }

    render() {

        return (
            <form onSubmit={this.search}>
                <input type="text" defaultValue={this.props.query} ref={this.input} />
                <button type="submit">Search</button>
            </form>
        );
    }
};

const mapStateToProps = (state) => ({
    query: state.search.query
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
    search: searchActionCreator
}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Search));

searchReducer.js

const initialState = {
    query: null,
    results: []
};

export default (state = initialState, action) => {
    switch(action.type) {
        case 'SEARCH':
            return {
                ...state,
                query: action.query,
                results: searchData()
            }
        case 'CLEAR_SEARCH':
            return initialState;
        default:
            return state
    }
};

Результаты.jsx

import React from 'react';
import Header from 'Containers/Header';
import ItemList from './ItemList';

export default (props) => (
    <div>
        <Header />
        <ItemList items={props.results} />
    </div>
);