Reactjs 反应搜索-从任何路线进行搜索

我正在试验ReactiveSearch并使用ReactiveList组件

我正试图弄清楚如何通过我的React应用程序导航，并且仍然能够进行搜索

假设我在回家的路上，使用DataSearch组件进行自动完成，这会将我带到结果页面

'/results

，但我没有得到任何结果

为了得到结果，我必须在

'/results'

页面上搜索并停留。标题中的DataSearch组件是否缺少一个道具：

<DataSearch
  componentId="SearchSensor"
  dataField={["original_title"]}
  className="search-bar"
  showIcon={true}
  iconPosition="right"
  innerClass={{
    title: "text-title",
    input: "text-input",
    list: "text-item"
  }}
  />

同样，为了获得结果，我必须从结果页面上的DataSearch组件进行搜索。当我从标题中的DataSearch组件进行搜索时，搜索不起作用

---

因此，我如何设置它，使其能够从我可能使用的任何路由执行搜索（例如从标题中的DataSearch组件进行搜索）？

这里，您将只使用

DataSearch

进行自动完成，然后重定向到结果页面以获得实际结果。为此，您可以使用

DataSearch

上的

onValueSelected

道具：

onValueSelected

将使用通过用户交互选择的值调用。它仅适用于

autosuggest

，并在选择建议或按enter键执行搜索时调用。如果操作原因是

'SUGGESTION\u SELECT'

，它还会传递操作原因和源对象

因此，您可以在主页上获取所选值，然后使用它在结果页面上进行搜索。此值可以存储在组件的状态中进行搜索，也可以在结果页面中添加

DataSearch

，并使用

URLParams

属性从url设置其值。例如：

主页

Router.push（`？q=${val}`）}//例如，这里使用nextjs路由器
/>

结果页

---

或者，您可以使用主页上的

onValueSelected

将所选值设置为状态（或存储），然后使用

defaultQuery

prop在结果页面上查询

反应列表设置并使用onValueSelected要在我的DataSearch组件中路由结果，我可以在主页和React Navbar组件中使用相同的DataSearch组件，它应该给出来自主页或应用程序中任何其他路由器的结果？是吗？是的，没错：）
<DataSearch
  ...
  componentId="q"
  onValueSelected={(val) => Router.push(`?q=${val}`)}  // using nextjs router here for example
/>

<DataSearch
  ...
  componentId="q"  // will set its value from the param 'q'
  URLParams
  className="hidden"  // adding some CSS to hide it if not needed
/>

<ReactiveList
  ...
  react={{
    and: ['q']
  }}
/>