如何在React Algolia中将搜索栏置于导航栏、结果置于页面主体？

我有一个可正常运行的React Algolia组件，代码如下：

const AlgoliaSearchBar = ({ instantSearchParams, className }) => {
    const { instantSearchProps } = instantSearchParams || {};

    return (
      <div className={"flex " + className}>
        <div className="flex-auto mt-6" style={{width: '400px'}}>
            <InstantSearch
              {...instantSearchProps}
              searchClient={searchClient}
              indexName="instant_search"
              insights={true}
            >
                <SearchBoxWithSuggestions />

                <Configure hitsPerPage={16} />

                <CurrentRefinements
                  className="current-refinements"
                  includedAttributes={['query', 'categories']}
                />

                <RenderHits />
             
            </InstantSearch>
        </div>
      </div>
    );
}

export default AlgoliaSearchBar;



const RenderHits= ({ column }) => {
    return (
        <div className="">
            <div className={`container-column${column}`}>
                <Hits hitComponent={Hit} />
            </div>
        </div>
    );
};

export default RenderHits;

当前将AlgoliaSearchBar放在div容器中时可正常工作，但我希望将搜索栏放在导航栏，搜索结果放在页面主体。若直接在导航栏调用AlgoliaSearchBar，搜索结果也会渲染在导航栏，显示效果不佳。请问如何分离RenderHits到页面主体，同时将搜索栏保留在导航栏？

要实现搜索栏和结果的分离渲染，核心是利用Algolia InstantSearch的上下文共享能力，将<InstantSearch>作为顶层容器，让搜索组件和结果组件共享同一搜索状态。

步骤1：重构顶层搜索上下文容器 #

创建一个顶层的搜索提供者组件，将<InstantSearch>提升到包含导航和页面主体的父层级：

// SearchProvider.jsx
import { InstantSearch, Configure } from 'react-instantsearch-hooks-web';
import searchClient from './your-search-client'; // 替换为你的searchClient路径

export const SearchProvider = ({ children }) => {
  return (
    <InstantSearch
      searchClient={searchClient}
      indexName="instant_search"
      insights={true}
    >
      <Configure hitsPerPage={16} />
      {children}
    </InstantSearch>
  );
};

步骤2：拆分导航栏搜索组件 #

单独提取仅包含搜索功能的组件，用于导航栏：

// NavSearchBar.jsx
import { SearchBoxWithSuggestions, CurrentRefinements } from 'react-instantsearch-hooks-web';

export const NavSearchBar = ({ className }) => {
  return (
    <div className={"flex " + className}>
      <div className="flex-auto mt-6" style={{width: '400px'}}>
        <SearchBoxWithSuggestions />
        <CurrentRefinements
          className="current-refinements"
          includedAttributes={['query', 'categories']}
        />
      </div>
    </div>
  );
};

步骤3：保留结果渲染组件 #

直接复用原有的RenderHits组件用于页面主体：

// RenderHits.jsx
import { Hits } from 'react-instantsearch-hooks-web';
import Hit from './Hit'; // 替换为你的Hit组件路径

export const RenderHits= ({ column }) => {
    return (
        <div className="">
            <div className={`container-column${column}`}>
                <Hits hitComponent={Hit} />
            </div>
        </div>
    );
};

步骤4：在页面中组合使用 #

在页面根组件中，用SearchProvider包裹导航和主体，分别放置对应组件：

// App.jsx
import { SearchProvider } from './SearchProvider';
import { NavSearchBar } from './NavSearchBar';
import { RenderHits } from './RenderHits';

function App() {
  return (
    <SearchProvider>
      {/* 导航栏区域 */}
      <nav className="navbar">
        <NavSearchBar className="search-bar" />
        {/* 其他导航元素 */}
      </nav>

      {/* 页面主体区域 */}
      <main className="page-content">
        <RenderHits column={2} />
        {/* 其他主体内容 */}
      </main>
    </SearchProvider>
  );
}

export default App;

原理说明 #

<InstantSearch>会创建一个全局搜索上下文，所有内部的Algolia组件（如SearchBox、Hits）都会自动订阅该上下文的状态变化。将InstantSearch提升到顶层后，导航栏的搜索组件和主体的结果组件共享同一状态，搜索输入会实时同步到结果组件，从而实现分离渲染但状态联动的效果。

内容的提问来源于stack exchange，提问作者Frederik Nielsen