Поисковый интерфейс Elasticsearch с React

Question

У меня есть сайт React с боковым и основным контентом. Я хочу использовать search-ui для поиска на сайте.

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

В свою очередь, я настраиваю Search-UI SearchBox следующим образом

      <SearchBox
    autocompleteResults={{
        titleField: "title",
        urlField: "url"
    }}
    autocompleteSuggestions={true}
    onSubmit={searchTerm => {
        navigate("/elastic-search?q=" + searchTerm);
    }}
    onSelectAutocomplete={(selection, {}, defaultOnSelectAutocomplete) => {
        if (selection.suggestion) {
            navigate("/elastic-search?q=" + selection.suggestion);
        } else {
            defaultOnSelectAutocomplete(selection);
        }
    }}
/>

Поэтому, когда пользователь что-то ищет, приложение будет перенаправлять на отдельную страницу с именем elastic-search, и я передаю searchTerm в URL-адресе через метод навигации.

В MainContent у меня есть такие результаты:

      <Results titleField='title' urlField='url'/>

Теперь вопрос в том, как я могу получить searchTerm и отобразить результаты в основном контенте. Структура приложения такая:

      <App>
   <SearchProvider config={config}>
      <Aside /> ---- Here I have <SearchBox>
      <MainContent /> ---- Here I have <Results>
   </SearchProvider>
</App>

Когда я ищу, приложение перенаправляется на /elastic-search с searchTerm в URL-адресе, но результаты не отображаются. Если я обновляю страницу, они отображаются. Как я могу уведомить Результаты или повторно отобразить страницу, чтобы я мог показать результаты поиска.

Answer 1

В ваших результатах отсутствуют некоторые параметры, и они должны выглядеть примерно так:

      <>
  <Results
    titleField="title"
    urlField=""
    view={SearchView}
    resultView={SearchResultView}
  />
</>

И ваши компоненты SearchView (используется для переопределения представления по умолчанию для этого компонента) и SearchResultView (используется для переопределения отдельных представлений результатов .) должны выглядеть примерно так:

      const SearchView = ({ children }) => {
   return <div>{children}</div>
};

const SearchResultView = ({ result: searchResult }) => {
  return <div>{searchResult.content}</div>
}

Дополнительное предложение

Это рабочий пример в приложении Next.js с import { useRouter } from "next/router";который необходимо заменить вашим решением маршрутизации. В компоненте SearchBox :

      export const SearchBoxComponent = () => {
 const router = useRouter();
 return (
  <>
  <SearchBox
    searchAsYouType={true}
    autocompleteResults={{
      titleField: "title",
      urlField: "",
      shouldTrackClickThrough: true,
      clickThroughTags: ["test"],
    }}
    autocompleteSuggestions={true}
    onSubmit={(searchTerm) => {
      const urlEncodedQuery = encodeURI(searchTerm).replace(/%20/g, "+");
      router.push(`/search?q=${urlEncodedQuery}`);
    }}
    ...
    </>
    )
    }