Syncing URL with instantsearch using next.js adding one unnecessary re-route #6165
-
I am using next.js and currently I have an input on my homepage that allows a user to enter a search. I made it so that when a user submits their search on the homepage, it takes them to the /search page which uses algolia's instantsearch with the search already applied (to do this, I used routing={true} on my InstantSearch component). The issue I have comes from the browser history. So when a user types "phone" on the home-page, it goes from "/" -> "/search?search=phone" -> "/search?<index_name>%5Bquery%5D=phone". Now when the user clicks the back button on the browser, it takes them to "/search?search=phone" which isn't actually connected to algolia, so it just shows the /search page with all the results in my index. How can I have it so that the user is instantly taken to "/search?<index_name>%5Bquery%5D=phone" instead of "/search?search=phone"? For ContextOn my homepage, I have the following event listener
On my search page.tsx, I have:
|
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
With routing enabled, you don't need to set the Alternatively, you can customize the query string generated and parsed by InstantSearch router by changing the state mapping: https://www.algolia.com/doc/guides/building-search-ui/going-further/routing-urls/js/#rewriting-urls-manually. Finally, as you're using React InstantSearch with Next.js, make sure you read about our dedicated routing support for this framework and choose the relevant method related to whether you are in app or page router: |
Beta Was this translation helpful? Give feedback.
With routing enabled, you don't need to set the
initialUiState
as long as you navigate to the search page with the correct query parameters. Just change the route in yourhandleSearch()
method to match what InstantSearch expects by default.Alternatively, you can customize the query string generated and parsed by InstantSearch router by changing the state mapping: https://www.algolia.com/doc/guides/building-search-ui/going-further/routing-urls/js/#rewriting-urls-manually.
Finally, as you're using React InstantSearch with Next.js, make sure you read about our dedicated routing support for this framework and choose the relevant method related to whether you are in app or page router: