Реагировать на URL-адрес изменения ссылки, но отображать компонент только один раз при нажатии элемента списка в раскрывающемся меню

Question

У меня есть поисковый ввод, который выбирает результат поиска через вызов API, результаты отображаются на элементы списка и отображаются для пользователя в виде выпадающее меню. Когда пользователь выполняет поиск, он может нажать на любую результат, который должен отобразить страницу с подробностями.

Проблема: Когда пользователь нажимает в первый раз, ссылка работает нормально и Страница деталей отображается, когда пользователь снова выполняет поиск по деталям. страницы с использованием того же поискового ввода и нажмите на раскрывающуюся ссылку, он изменяет URL-адрес в браузере, но не отображает компонент.

Ниже код, который я пытаюсь, не уверен, что я делаю неправильно здесь.

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

import React , {Component} from 'react';
import rp from 'request-promise'
import {Link} from "react-router-dom";

class Search extends Component {
    constructor(props) {
        super(props);
        this.state = {
            query : '' ,
            results : {} ,
            Loading : false ,
            message : ''
        }
    }

    fetchQueryResults = (query) => {
        const searchCred = {
            url : `${process.env.REACT_APP_DEV_API}search?q=${query}` ,
            json : true
        };
        rp(searchCred , (error , resp) => {
            try {
                const noResultMsg = !resp.body.length
                    ? 'No Result found, Try new search'
                    : '';
                this.setState({
                    results : resp.body ,
                    message : noResultMsg ,
                    Loading : false
                })
            } catch (error) {
                this.setState({
                    Loading : false ,
                    message : 'Not found'
                })
            }
        })
    };
    handleInputChange = (event) => {
        const query = event.target.value;
        this.setState({query : query , Loading : true , message : ''} , () => {
            this.fetchQueryResults(query);
        });
    };
    closeDropdown = () => {
        this.setState({
            results : [] ,
            query : ''
        })
    };
    processSearchResults = () => {
        const {results} = this.state;
        if (Object.keys(results).length && results.length) {
            return (
                <div className='search_result_box'>
                    {results.map(result => {
                        return (
                            <Link to={`/assets/${result.slug}/${result.symbol}`} onClick={this.closeDropdown}>
                                <ul className="search_result_ul" key={result.slug}>
                                    <li className="search_asset_img">
                                        <img className='search_asset_icon' src={result.icon} alt=""/>
                                    </li>
                                    <li className="search_asset_name"> {result.name} </li>
                                    <li className="search_asset_symbol"> {result.symbol} </li>
                                </ul>
                            </Link>
                        )
                    })}
                </div>
            )
        }
    };

    render() {
        const {query} = this.state;
        return (
            <div>
                <div className="primary_search_wrapper_nav">
                    <div className="primary_search_left_container-nav">
                        <div className="primary_search_icon">
                            <span className='search_icon'> </span>
                        </div>
                        <div className="primary_search_input_container">
                            <input type="text" className="primary_search_input" name='search'
                                   value={query} onChange={this.handleInputChange}
                                   placeholder='Search assets...'/>
                        </div>
                    </div>
                </div>
                {this.processSearchResults()}
            </div>
        );
    }
}

export default Search;

index.js или компонент маршрутизации

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom';




import HomeLayout from "./Layouts/HomeLayout";
import FetchAssetOverviewData from "./Components/CoinOverview/FetchAssetOverviewData";


ReactDOM.render(
    <BrowserRouter>
        <div>
            <Navbar/>
            <Switch>
                <Route path='/' exact render={(props) => <HomeLayout {...props}  />}/>

                <Route path="/assets/:slug/:symbol" render={(props) => <FetchAssetOverviewData {...props}  />}/>
            </Switch>

        </div>

    </BrowserRouter>, document.getElementById('root')
);