Custom routing: page parameter gets wiped out

[roxeteer]

I'm working with React InstantSearch Hooks, and I'm trying to configure custom routing to work in a similar fashion as the previous version of the site.

The site has page number as a 1-based ?page= query parameter. I have my stateToRoute() and routeToState() functions working otherwise, but if I access a subpage directly (or refresh the view), InstantSearch always removes the page parameter already before I can work with it. All the other parameters seem to be functioning fine.

So for example, if I access the page with /search?query=testing&page=2, the route instantly changes into /search?query=testing and the page parameter will not be available in the routeToState() function.

Here's a simplified example of my implementation:

import { RouterProps } from "instantsearch.js/es/middlewares/createRouterMiddleware";
import { IndexUiState, UiState } from "instantsearch.js/es/types/ui-state";
import { history } from "instantsearch.js/es/lib/routers";

const routing: RouterProps<UiState, UiState> = {
  router: history(),
  stateMapping: {
    stateToRoute(uiState) {
      const indexUiState = uiState[process.env.ALGOLIA_INDEX_NAME!];
      const route: Record<string, any> = {};

      // ...

      if (indexUiState.page) {
        route.page = indexUiState.page;
      }

      return route;
    },
    routeToState(routeState) {
      const indexUiState: IndexUiState = {};

      // ERROR: `page` field always missing from `routeState`!
      if (routeState.page) {
        indexUiState.page = routeState.page;
      }

      // ...

      return {
        [process.env.ALGOLIA_INDEX_NAME!]: indexUiState,
      };
    }
  }
}

This is used in jsx:

import algoliasearch from "algoliasearch/lite";
import { InstantSearch } from "react-instantsearch-hooks-web";

<InstantSearch
  searchClient={searchClient}
  indexName={process.env.ALGOLIA_INDEX_NAME}
  routing={routing}
>
  <Search />
</InstantSearch>

[Haroenv]

For a parameter to stay in the URL, a widget needs to own that parameter. In this case, page is owned by Pagination or usePagination. That widget must be rendered on the page

[Haroenv]

if that's not what's happening, a reproduction would be useful to find what's going on

[roxeteer]

I do have <Pagination /> on the page, but it doesn't seem to make any difference. The search results and the ?page= parameter are correctly updated when I click the links in the pagination widget, but on reload it disappears.

[roxeteer]

I created a codesandbox and it worked fine there, so I'm not linking to it. What I realized was that I'm running the search React app as a custom block inside WordPress, and it's the WP that removes the query param. WP uses ?page= for it's own blog post pagination and since there is no need for pagination on that page, it removes the parameter. I have to try and figure out if there's a way to retain "reserved" parameters in WP.

Thanks for your help anyway!