Angular InstantSearch v3 routing not updating url

Hello,

i want to synchronize the search term in the URL so i followed this tutorial.
However, if i just set routing: true the URL gets updated correctly, but using a custom implementation seems to do nothing.

Here’s my code:

algoliaInstantsearchConfig: InstantSearchConfig = {
        searchClient: algoliasearch('xxx', '123456'),
        indexName: 'the index name',
        routing: {
            router: historyRouter({
                createURL({ qsModule, routeState, location }) {
                    const urlParts = location.href.match(/^(.*?)\/search/);
                    const baseUrl = `${urlParts ? urlParts[1] : ''}/`;

                    console.log('CU', routeState, location);

                    const queryParameters: any = {};

                    if (routeState.query) {
                        queryParameters.query = encodeURIComponent(routeState.query);
                    }
                    if (routeState.page !== 1) {
                        queryParameters.page = routeState.page;
                    }

                    const queryString = qsModule.stringify(queryParameters, {
                        addQueryPrefix: true,
                        arrayFormat: 'repeat'
                    });

                    return `${baseUrl}search/${queryString}`;
                },

                parseURL({ qsModule, location }) {
                    console.log('PU', location);
                    const pathnameMatches = location.pathname.match(/search\/(.*?)\/?$/);
                    const { query = '', page } = qsModule.parse(
                        location.search.slice(1)
                    );

                    return {
                        query: decodeURIComponent(query),
                        page
                    };
                }
            }),

            stateMapping: {
                stateToRoute(uiState) {
                    console.log('StR', uiState);
                    return {
                        query: uiState.query,
                        page: uiState.page
                    };
                },

                routeToState(routeState) {
                    console.log('RtS', routeState);
                    return {
                        query: routeState.query,
                        page: routeState.page
                    };
                }
            }
        }
    };

The stateToRoute function gets fired with the correct current values in uiState. createURL however gets also fired but routeState.query and routeState.page are always undefined.

What’s causing the issue here?

I’m using…

  • angular-instantsearch 3.0.0-beta.4
  • algoliasearch 3
  • instantsearch.js 4.2.0

Thank you for your assistance

Angular InstantSearch v3 works with InstantSearch.js v3, so you’ll need to downgrade to InstantSearch.js 3.7.0. This is because the routing format has changed in InstantSearch.js v4.

Thank you, that solved the issue!