如何返回上一个搜索结果

Question

我有一个List.js页和一个Detail.js页。我使用<Link to={{ pathname: '/detail/'+ID}}>View More</Link>从列表导航到详细信息页面。

现在，如何使用所有搜索results(list)返回列表页面？

列表组件呈现从{items}向下传递的项目App.js的列表。我应该从App.js中的{items}还是List.js访问搜索查询，以及如何执行？我正在学习反应路由器。谢谢。

index.js

 <BrowserRouter>
   <Switch>
      <Route path='/' component={App} />
      <Route path='/detail/:ID' component={Detail} />
   </Switch>
</BrowserRouter>

App.js

class App extends Component  {
   state = { query:null, items:[] }

   componentDidMount() {
     const {query} = this.state;
     this.runSearch({query});
   }

   runSearch = async(query) => { const response= await axios.get('apiurl\', { params:{ query: query} });
       this.setState({items: response.data});
   }

   render() { 
     return <div>
         {/*search bar*/}
     <List items={this.state.items} />
     </div>
   }
}

List.js

const List=({items})=>{
      //map list
      const renderedList= items.map(item=>{
          return (<div>
          <div class="content">
            <Link  to={{ pathname: 'detail/'+item.ID}}                    
              key={item.ID}>
              View More
            </Link>    
          </div></div>)
      });

      return (
        <Router><div>
          {renderedList}
          <Route path="detail/:ID" component={Detail} />
          </div></Router>);
}
export default List;

Detail.js

class Detail extends Component {
    state={
       ID: this.props.match.params.ID,
       result:[]};
       componentDidMount(){
          this.runSearch();
       }

       runSearch=async()=>{
          const response= await axios.get('API\?{this.props.match.params.ID}')
                 this.setState({result: response.data});
       }

       render(){
          return (
            <div>
            Detail: ID {this.props.match.params.ID}
                Name {this.state.result["name"]}
            </div>
          ); 
       }   
};

export default withRouter(Detail);