Как я могу перезагрузить компонент React на основе URL-адреса, установленного родственным компонентом?

У меня есть компонент Main, содержащий следующий код, и он отлично работает.

<Switch>
<Route path='/compare' component = {Compare} />
<Route exact path='/' component = {Home} />
<Route path = {`/search`} component = {Search} />
<Route path = {`/:vehicleId`} component = {VehicleDetail} />
</Switch>

Компонент Search, который вы видите выше, имеет поле ввода поиска, которое при использовании показывает результат поиска. Я хочу получить поле поиска из компонента «Поиск» и разместить его на панели навигации, но при этом отображать результат в компоненте «Поиск» при поиске с панели навигации. Вот как выглядит мой App.js.

<div>
 <Navbar/> <-- search box is here now
 <Main/> <-- I have to show the result in here now, inside Search component
 <Footer/>
</div>

Я пытаюсь установить URL-адрес из компонента Navbar с помощью следующего кода, и он отлично работает.

this.props.history.push(`/search?q=${query}`)

Однако обновляется только URL-адрес, но компонент Search не выполняет повторную визуализацию, когда я уже нахожусь на странице поиска. Другими словами, я могу загрузить компонент поиска, когда ищу с другого URL-адреса, но как только я попадаю в domain.com/search?q=mercedes, я не вижу повторного рендеринга результата поиска, если я ищу, скажем, peugeot, который обновляет URL-адрес на domain.com/search?q=peugeot, но все же показывает результаты последнего поиска, то есть mercedes.

Как я могу повторно отрендерить компонент Search?

Дополнительная информация Код компонента поиска выглядит следующим образом:

state = {
        query   : (new URL(document.location)).searchParams.get('q'),
        submit  : false,
        result  : []
    }

    componentDidUpdate() {
        if (this.state.submit) {
            let url = `${data.api}api/all/?search=${this.state.query}`
            fetch(url)
                .then(response => response.json())
                .then(data => {
                    this.setState({
                        result : data
                    })
                })
            this.setState({ submit : false })
        }
    }

    componentDidMount() {
        let url = `${data.api}api/all/?search=${this.state.query}`
        fetch(url)
            .then(response => response.json())
            .then(data => {
                this.setState({
                    result : data
                })
            })
    }

Это отлично работает, поскольку поле поиска находится в компоненте поиска. Однако этот код не работает, когда я выполняю history.push и обновляю URL-адрес из родственного компонента Navbar.