如何使用 React Router 和 Algolia 搜索命中？

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

Code:

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 文档中找不到任何有关此内容的信息。再次，我希望能够单击我的点击之一，并将其​​重定向或路由到特定页面。

看起来您正在使用自定义点击小部件这里而不是开箱即用的 instantsearch.js 小部件（这很好）。

您需要在点击模板中构建链接：

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>

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