Using Link with react-instantsearch

[jentoobento]

Is anyone else using react-instantsearch with a Link? This gives an error useHref() may be used only in the context of a <Router> component. Using a instead of Link works but I wanted to know if anyone got it to work using Link. Here's a little snippet showing how I'm trying to use it

import { renderToString } from 'react-dom/server';
import {
  getServerState,
  InstantSearch,
  InstantSearchSSRProvider,
} from "react-instantsearch";
import { useLoaderData, Link } from '@remix-run/react';
import { defer } from '@shopify/remix-oxygen';

export async function loader() {
  const serverState = await getServerState(
    <Search
      serverUrl={serverUrl}
      serverState={serverState}
    />,
    {
      renderToString,
    }
  );

  return defer({ serverState });
}

export default function SearchPage() {
  const { serverUrl, serverState } = useLoaderData();
  return <Search serverUrl={serverUrl} serverState={serverState} />;
}

export const Search = ({ serverUrl, serverState }) => {
  return (
    <InstantSearchSSRProvider {...serverState}>
      <InstantSearch>
        <Link to={anotherPage} />
      </InstantSearch>
    </InstantSearchSSRProvider>
  )
}

[kiliman]

I deleted my previous comment.

Actually, I think the issue is that getServerState is trying to use renderToString of your <Search> component, but you can't do that without a Remix context. That's why it complains about useHref.

It should probably work if you wrap the <Search> component inside <ClientOnly> from remix-utils:

export const Search = ({ serverUrl, serverState }) => {
  return (
    <ClientOnly fallback={<p>Loading...</p>}>
      {() => (
        <InstantSearchSSRProvider {...serverState}>
          <InstantSearch>
            <Link to={anotherPage} />
          </InstantSearch>
        </InstantSearchSSRProvider>
      )}
    </ClientOnly>
  );
};

https://github.com/sergiodxa/remix-utils?tab=readme-ov-file#clientonly