React Link更改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')
);