広告ここから
広告ここまで
AlgoliaのReact Instantsearch Hooksを使った場合、検索フォームに入力したキーワードなどがURLにクエリ文字列として追加されます。
例: https://example.com?example_index_name[query]=searchWord
この文字列を変更する方法の覚書です。
InstantSearch
のrouting.stateMapping
でカスタマイズする
<InstantSearch>
コンポーネントには、routing
プロパティを追加できます。
ここで検索のStateとURLのクエリ文字列のマッピングを調整します。
const indexName = process.env.NEXT_PUBLIC_ALGOLIA_INDEX_NAME as string
return (
<InstantSearch
searchClient={searchClient}
indexName={indexName}
routing={{
router: history(),
stateMapping: {
stateToRoute: (uiState) => {
const indexUiState = uiState[indexName]
return indexUiState
},
routeToState: (routeState) => {
return {
[indexName]: routeState
}
},
},
}}
>
stateToRoute
では、uiState
から検索インデックス名を除去しています。
routeToState
にて除去したインデックス名を追加してやることで、整合性を保ちます。
この設定を行うと、URLがhttps://example.com?query=searchWord
とシンプルになります。
参考にした記事
ブックマークや限定記事(予定)など
WP Kyotoサポーター募集中
WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。
14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。
広告ここから
広告ここまで