React-Router определил this.props.location, затем через секунду undefined

Question

Я работаю над созданием функции поиска для личного проекта, используя React и React-Router. У меня проблемы с передачей состояния между компонентами с помощью реактивного маршрутизатора. Ниже приведены соответствующие фрагменты кода. Соответствующая часть приложения. js:

<Router> 
    <SearchBar />
    <Route path='/browse' render={(props) => <Browse {...props} />} />
<Router> 

У меня есть компонент панели поиска (SearchBar. js), который при вызовах отправки:

onSubmit() {
        this.callAPI();
        this.props.history.push({
            pathname: '/browse', 
            state: {response: this.state.response}
        });
}

, где callAPI ( ) вызывает мой API, чтобы получить список книг в виде JSON объектов.

В компоненте «Обзор» рендеринга (Browse. js) я обращаюсь к this.props.location.state.reponse, чтобы показать результаты поиска.

В течение секунды страница обзора отображается должным образом. Я вижу список искомых книг в компоненте панели поиска. Затем он ломается, и я получаю «TypeError: не удается прочитать свойство 'response' of undefined».

Я без проблем ссылался на this.props.location.state в других местах. Почему срабатывает секунду, а потом ломается? Любая помощь будет оценена!