如何使用Algolia搜索命中的Reaction路由器？ [英] How to use react router with Algolia search hits?

问题描述

我正在使用Algolia的Reaction即时搜索，我想知道当我单击Hits小部件中的Hit"；时，可以使用哪些代码将我转到特定页面。我正在使用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文档中找不到任何关于这方面的内容。同样，我希望能够单击我的点击之一，并让它将我重定向或路由到特定页面。

推荐答案

我找到答案了：

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，然后在hit.url属性上使用Reaction路由器！

这篇关于如何使用Algolia搜索命中的Reaction路由器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！