Архитектура ReactiveSearch - PullRequest
Новая
       11

Архитектура ReactiveSearch

0 голосов
/ 16 мая 2019

У меня проблемы с отображением результатов поиска, и я спрашиваю, не настроен ли он у меня (что я считаю идеальным), но, возможно, это невозможно?

У меня на сайте есть глобальный Navbar, который условно отображает окно поиска на основе маршрута. Единственный маршрут, который не отображает окно поиска, это '/'.

Поле поиска на самом деле является компонентом DataSearch из ReactiveSearch. Я импортирую компонент DataSearch в компонент Navbar, а также импортирую этот компонент SAME DataSearch в свой компонент ResultList.

Компонент NavbarSearchBox выглядит следующим образом: 

const NavbarSearchBox = ({ history }) => (
    <div className="">
        <DataSearch
            componentId="q"
            dataField={['Author']}
            autosuggest={true}
            onValueSelected={value => history.push(`/search?q="${value}"`)}
            className="search-container"
            showIcon={true}
            icon={(<i className="fa fa-search fa-lg search-icon"></i>)}
            iconPosition="right"
            innerClass={{
                input: "search-input",
                list: "search-list"
            }}
            URLParams={true}
        />
    </div>
);

В моем компоненте Navbar я отображаю компонент DataSearch следующим образом: 

{ location.pathname !== '/' ? 
<NavbarSearchBox onValueSelected={value => this.push(`/search?q="${value}"`)} />
: null }

В моем компоненте ResultList я отображаю компонент DataSearch следующим образом: 

<NavbarSearchBox onValueSelected={value => this.push(`/search?q="${value}"`)} />

Прямо выше, где я рендерил компонент ReactiveList:

В моем компоненте App.js этот маршрут отображается следующим образом: 

<Navbar />
<Route exact path={`/search?q="${value}"`} component={ResultsList} />

Однако эта настройка не работает. Страница результатов отображается, но без результатов.

Я не совсем уверен, куда я иду не так?

Я настроил все так, чтобы пользователи могли выполнять поиск на любой странице сайта без необходимости импортировать Navbar на каждой странице.

...