Как правильно отобразить ReactiveList

Question

Так что у меня есть немного проблемы с макетом - дизайном - просмотром. Я работаю с ReactiveSearch (отличная библиотека!) Для создания поискового интерфейса. Наконец-то все заработало, и теперь я пытаюсь понять, как правильно отобразить результаты... прямо сейчас результаты отображаются в глобальной панели навигации (объяснение ниже), и это, очевидно, не сработает.

У меня есть SearchContainer, который содержит необходимый код для работы ReactiveSearch - в основном у меня есть ReactiveBase, DataSearch и ReactiveList для их автозаполнения, поиска и результатов. Это выглядит так: SearchContainer.js:

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

Это прекрасно работает для моей домашней страницы, которая просто импортирует и использует DataSearch для автозаполнения и отправки запросов.

Проблема возникает на маршруте "/results". У меня есть мой глобальный компонент Navbar, отображаемый с помощью React в моем App.js. Компонент DataSearch в Navbar отображается условно в зависимости от маршрута (все, кроме '/').

ReactiveList используется для отображения результатов и находится в компоненте Results. Компонент Results условно отображается в SearchContainer на основе маршрута и состояния загрузки (как вы можете видеть выше).

Проблема в том, что результаты отображаются в Navbar, потому что я импортирую SearchContainer в свою Navbar, чтобы у меня был DataSearch в глобальной Navbar.

Я не могу понять, как я могу отобразить ReactiveList (который находится в компоненте Results) ниже Navbar? - очень похоже на то, как Google/Bing делает это на своих страницах результатов.