AlgoliaReact

Algolia Instantsearch Hooksを使った場合の、URLに追加されるクエリ文字列をカスタマイズする

AlgoliaのReact Instantsearch Hooksを使った場合、検索フォームに入力したキーワードなどがURLにクエリ文字列として追加されます。 例: https://example.com?example […]

広告ここから
広告ここまで

AlgoliaのReact Instantsearch Hooksを使った場合、検索フォームに入力したキーワードなどがURLにクエリ文字列として追加されます。

例: https://example.com?example_index_name[query]=searchWord

この文字列を変更する方法の覚書です。

InstantSearchrouting.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とシンプルになります。

参考にした記事

https://www.algolia.com/doc/guides/building-search-ui/going-further/routing-urls/react-hooks/#seo-friendly-urls

ブックマークや限定記事(予定)など

WP Kyotoサポーター募集中

WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。

14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。

広告ここから
広告ここまで

Related Category posts