如何使用Algolia搜索命中的Reaction路由器?
我正在使用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路由器!
相关文章