如何将反应路由器与 Algolia 搜索命中一起使用？

Question

我正在使用 Algolia 的 React 即时搜索，我想知道我可以使用什么代码在我点击“点击”小部件中的“点击”时将我发送到特定页面。我正在使用 Next.js.

代码：

import React from 'react';
import { useRef, useState, useEffect } from 'react';
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch } from 'react-instantsearch-dom';
import { Index } from 'react-instantsearch-dom';
import { Configure } from 'react-instantsearch-dom';
import { Pagination } from 'react-instantsearch-dom';

const searchClient = algoliasearch(
  'XXXXXXXXXX',
  'XXXXXXXXXXXXXXXXXXXXXXXXXXX'
);

const Hit = ({ hit }) => <p>{hit.title}</p>;

import { connectSearchBox } from 'react-instantsearch-dom';

const SearchBox = ({ currentRefinement, isSearchStalled, refine }) => (  
  <form noValidate action="" role="search">
   <div className="container flex justify-center items-center px-4 sm:px-6 lg:px-8 relative">
    <input
      type="search"
      placeholder='Search Documentation'
      value={currentRefinement}
      onChange={event => refine(event.currentTarget.value)}
      className="h-7 w-96 pr-8 pl-5 rounded z-0 hover:text-gray-500 outline-none border-b-2"   
    />
    <i className="fa fa-search text-gray-400 z-20 hover:text-gray-500"></i>
    </div>
    <button onClick={() => refine('')}>Reset query</button>
    {isSearchStalled ? 'My search is stalled' : ''}
  </form>
);

const CustomSearchBox = connectSearchBox(SearchBox);

import { connectHits } from 'react-instantsearch-dom';

const Hits = ({ hits }) => (
  <table className="table-auto">
    {hits.map(hit => (
     <tbody>
     
     <tr>
     <td className="text-black font-bold" key={hit.objectID}>{hit.title}</td>
     </tr>
     
     </tbody>
    ))}
  </table>
);

const CustomHits = connectHits(Hits);

import { QueryRuleCustomData } from 'react-instantsearch-dom';

function SearchApp({location, history}) {
  const [showHits, setShowHits] = useState(false);

  return (
    <div>
      <>
        <InstantSearch
          indexName="prod_Directory"
          searchClient={searchClient}
        >
          <Index indexName="prod_Directory">
            {/* Widgets */}
            <div>
              <CustomSearchBox onFocus={()=>setShowHits(true)} onBlur={()=>setShowHits(false)}/>
              <CustomHits className="table-auto"/>
{/*
              {showHits ? <CustomHits className="table-auto"/> : null}
*/}
            </div>
          </Index>
          <Configure hitsPerPage={2} />
          <QueryRuleCustomData
            transformItems={items => {
              const match = items.find(data => Boolean(data.redirect));
              if (match && match.redirect) {
                window.location.href = match.redirect;
              }
              return [];
            }}
          >
            {() => null}
          </QueryRuleCustomData>
        </InstantSearch>
      </>
    </div>
  )
}

export default SearchApp

我在 Algolia 文档中找不到任何相关信息。同样，我希望能够点击我的其中一个点击，然后让它将我重定向或路由到特定页面。

Answer 1

看起来您在这里使用的是 custom Hits widget 而不是开箱即用的 instantsearch.js 小部件（这很好）。

您将要在命中模板中 link 构建您自己：

const Hits = ({
  hits
}) => ( <
  table className = "table-auto" > {
    hits.map(hit => ( <
      tbody >

      <
      tr >
      <
      td className = "text-black font-bold"
      key = {
        hit.objectID
      } > {
        hit.title
      } < /td> <
      /tr>

      <
      /tbody>
    ))
  } <
  /table>
);

例如，如果您将 URL 存储在对象记录中，您可以执行以下操作：

{
 <a href="hit.url">hit.title</a>
}

您更有可能希望使用 Link 构建 onClick 事件。类似于：

<Link
  onClick={() => {
    setIsOpen(false);
  }}
  to={`/product/${hit.objectID}`}
>
  hit.title
</Link>

无论哪种情况，只需确保构建 link（URL、路由 ID 等）所需的一切都嵌入到 Algolia 记录中，然后只需构建您的 links 在您的命中模板中，就像您通常为您的应用程序所做的那样。

Answer 2

我找到了答案：

import router, {useRouter} from "next/router";

import { connectHits } from 'react-instantsearch-dom';

const Hits = ({ hits }) => (
 
 <table className="table-auto">
    {hits.map(hit => (
     <tbody>
     
     <tr>
     <td className="text-black font-bold" key={hit.objectID} onClick={() => router.push(hit.url)}>{hit.title}</td>
     </tr>
    
     </tbody>
    ))}
  </table>
);








const CustomHits = connectHits(Hits);

在你的搜索记录中（我使用 Algolia 索引来创建我的），你只需要在 JSON 记录中输入 url，然后在 [=15] 上使用 react router =]属性！

如何将反应路由器与 Algolia 搜索命中一起使用？

How to use react router with Algolia search hits?

javascript

reactjs

algolia

next.js

react-instantsearch