React-InstantSearch: URL Synchronisation with react-router

[johnschatner]

Hi!

I cannot find any info on how to get react-router working with URL sync.

I have a SearchPage that we can find under the path: "/search" and the query is passed as a URL param from a custom Algolia component. So when I press enter from the searchbox (the UI components are custom made with hooks) we navigate to the search page but this time with the query as a search param "/search?q=someValue".

Perhaps this is trivial but after reading through the docs I cannot find any way to programmatically do this apart from the routing property on , with which I have seen next router having much discussion but almost nothing on react-router.

Setup:

in header that has

      <InstantSearch indexName="indexvalue" searchClient={searchClient}>
        <CustomSearchBox
          ref={searchboxRef}
          value={queryValue}
          setValue={setQueryValue}
          searchIsActive={searchIsActive}
          setSearchIsActive={setSearchIsActive}
        />
        <SearchModal ref={searchModalRef} searchIsActive={searchIsActive}>
          <Index indexName="recipe_queries">
            <Configure hitsPerPage={4} sortby="count:desc" />
            <CustomHits
              index="queries1"
              hitAttribute="q"
              value={queryValue}
              setValue={setQueryValue}
              setSearchIsActive={setSearchIsActive}
            />
          </Index>
          <Index indexName="recipes">
            <Configure hitsPerPage={hitsPerPage} /> {/* filters={filters} */}
            <CustomHits
              index="queries2"
              hitAttribute="name"
              value={queryValue}
              setValue={setQueryValue}
              setSearchIsActive={setSearchIsActive}
            />
          </Index>
        </SearchModal>
      </InstantSearch>

And then when we press enter I navigate with react-router to "/search?q=someValue" to the search page with the URL search param which I then set as the query.

    <div className="search-page">
      <InstantSearch
        indexName="indexValue"
        searchClient={searchClient}
      >
        <Configure query={query} hitsPerPage={40} /> {/* filters={filters} */}
        <DisplayHits query={query} />
      </InstantSearch>
    </div>

Appreciate any help!

[Haroenv]

Have you seen the documentation about routing? https://www.algolia.com/doc/guides/building-search-ui/going-further/routing-urls/react/

[johnschatner]

Thanks for pointing me in the right direction. I have gotten further to solving this. However, I'm encountering a very weird issue. I have used the routing.ts file from the ecommerce template and have basically made no changes to it. It syncs the state to the URL just fine. The issue stems from when I'm navigating away from the search page, eg /search/?query=someQuery, and I navigate to say navigate("/home") the search query gets appended when I'm not even on the search page? The URL becomes: "/homesearch/". How to fix?

I'm using react-router-dom v6 and programmatically navigating with useNavigate and navigating with the component. More disturbingly this issue happens when navigating into whatever path, eg a detail page like "/details/:detailIdsearch/".

[Haroenv]

are you still mounting the InstantSearch component on the non-search components? You may not need the "append /search" logic in the e-commerce template too

[johnschatner]

I have one InstantSearch component in the header that is app wide. This instance doesn't have any routing prop on it. Then inside the I have another InstantSearch component that does have the routing from the template. I tried to change the logic to not use the append /search. But it seems that the issue is still there just in a different way.

Issue 1: When unmounting the the routing updates the URL once more regardless of what component we navigate to. So despite having fixed the logic that appends /search we now append the trailing slash instead. I'm confused as to how the routing logic is able to update the URL when its unmounted?

[johnschatner]

This workaround seems to almost work but the issue is still present.. it still updates the history with one more entry. So basically I have to go back twice for me to return to the search page.

const router = historyRouter({
cleanUrlOnDispose: false,

routing.tsx

const router = historyRouter({
  cleanUrlOnDispose: false,
...
  createURL({ qsModule, routeState, location }) {
    if (!window.location.pathname.includes("/search")) {
      return;
    }
    ...
   parseURL({ qsModule, location }) {
    if (!window.location.pathname.includes("/search")) {
      return;
    }
    ...
    const getStateMapping = ({ indexName }) => ({
  stateToRoute(uiState) {
    if (!window.location.pathname.includes("/search")) {
      return;
    }
...
  routeToState(routeState) {
    if (!window.location.pathname.includes("/search")) {
      return;
    }

So yeah, the appending isn't happening anymore but it's still updating the window history.

[johnschatner]

It also seems to encode whitespaces twice, html space becomes %20 then %2520. No idea how to solve.

EDIT: This was easily solved, make sure you don't encodeURIComponent more than once. I had mistakenly forgot that I already encode it when sending it from the header component to the search page.

[egolessengineer]

You need to make use of React Router's navigation hooks and possibly state management within your components to reflect the search query in the URL as a query parameter. Below is a step-by-step guide tailored to your setup:
Try these steps, it might be help.

1. Update URL with the Search Query

When the user submits a search query from your custom search box, you need to programmatically navigate to the /search path with the query parameter included. Assuming you're using React Router v5 or v6, you can use the useNavigate hook (v6) or useHistory hook (v5) for this purpose.

import { useNavigate } from 'react-router-dom';

// Inside your search box component or wherever you handle the search submission
const navigate = useNavigate();

const handleSearchSubmit = (queryValue) => {
  navigate(`/search?q=${queryValue}`);
};

2. Read URL Search Params on the Search Page

On your search page component, you'll need to read the query parameter from the URL and use it as the initial state or directly in your search component.

import { useLocation } from 'react-router-dom';

const SearchPage = () => {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const query = searchParams.get('q');

  // Now you can use 'query' as the initial state or directly in your InstantSearch component
  return (
    <div className="search-page">
      <InstantSearch indexName="indexValue" searchClient={searchClient}>
        <Configure query={query} hitsPerPage={40} />
        <DisplayHits query={query} />
      </InstantSearch>
    </div>
  );
};

3. Update Search Component State Based on URL

Ensure your search component's state is updated whenever the URL changes.

🦄 Good Luck.