1

我有一个包含主要内容的 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 的单独页面，并且我通过导航方法在 URL 中传递 searchTerm。

在 MainContent 我有这样的结果：

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

现在的问题是如何获取 searchTerm 并在主要内容上显示结果。应用程序的结构是这样的：

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

当我在 URL 中使用 searchTerm 搜索应用程序时重定向到 /elastic-search，但结果未显示。如果我刷新页面，它们就会显示出来。如何通知结果或重新呈现页面，以便显示搜索结果。

4

1 回答 1

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}`);
    }}
    ...
    </>
    )
    }
于 2022-02-21T10:28:45.663 回答