如何正确呈现ReactiveList

Question

所以我有一些布局-设计-查看问题。我正在与ReactiveSearch（很棒的图书馆！）一起建立搜索UI。我终于使事情正常了，现在我想弄清楚如何正确显示结果。.现在，结果显示在全局导航栏中（在下面的说明中），这显然行不通。

我有一个SearchContainer，其中保存了ReactiveSearch起作用的必要代码-基本上，我在其中具有ReactiveBase，DataSearch和ReactiveList，以实现自动完成，搜索和结果。看起来像这样： SearchContainer.js：

<ReactiveBase
  ...
>
  <DataSearch
    ...
  />
  { loading === false && location.pathname === '/results'
    ? <Route path="/results" component={Results} />
    : null }
</ReactiveBase>

这对于我的主页工作正常，该主页仅导入并使用DataSearch提供自动完成和查询提交。

问题出现在“ /结果”路径上。我的App.js中有React渲染的全局Navbar组件。导航栏中的DataSearch组件会根据路线（除“ /”之外的所有路线）有条件地呈现。

ReactiveList用于显示结果，并且位于“结果”组件中。根据路线和加载状态（如上所示），有条件地在SearchContainer中呈现“结果”组件。

问题在于结果是在Navbar中呈现的，因为我将SearchContainer导入到Navbar中，以便在全局Navbar中有一个DataSearch。

我不知道如何在导航栏下方呈现ReactiveList（位于“结果”组件中）？ -非常类似于Google / Bing在其结果页上的操作。