Open RobSchilderr opened 1 year ago
Hi @RobSchilderr,
Thanks for raising this issue !
We changed doNotOverrideBeforePopState
to a beforePopState
option which is more powerful as it can be composed with the library's own beforePopState
.
To do the same thing as doNotOverrideBeforePopState
, you can do this :
createInstantSearchRouterNext({
beforePopState: ({ state, ownBeforePopState }) => {
return ownBeforePopState(state);
}
})
ownBeforePopState
will be your pre-existing beforePopState
, which is just () => true
by default.
You can check more of the usage in the documentation : https://www.algolia.com/doc/api-reference/widgets/instantsearch-next-router/react-hooks/
@aymeric-giraudet I am also facing a similar issue but the solution you provided didn't work for me.
As soon as I open a link in the page with a search query /search?query="test" it gets cleared to /search only as you see below.
This happens when I navigate from another page or when reload the page with a query link. Routing inside the same page doesn't clear the queries.
Hi @Alihd1 !
Could you provide a reproduction ?
This could be due to widgets unmounting when being initialised, this would clear the state. It's a recurring problem, you have to make sure whatever is inside InstantSearch never unmounts.
Hi @aymeric-giraudet,
I made a reproduction link, I can see the same issue occurring.
https://codesandbox.io/p/sandbox/silly-breeze-yzhyt3?file=%2Fpages%2Findex.tsx%3A76%2C69
Click on Link "Navigate to Other Page" and on the other page click the link to return to search page with queries. You should see the url quries clear as soon as you navigate to the search page.
Hi @Alihd1,
This is a different issue than the one posted here which had to do with beforePopState
being overridden.
The issue you have is that the query is not correct, it should mention the indexName
and the key is query
not que
. Also the value should not be wrapped in quotes.
Instead of /?que='iphone'
it should be /?instant_search%5Bquery%5D=iphone
, you can see this CodeSandbox forked from yours works : https://codesandbox.io/p/sandbox/silent-surf-hdn8lx?file=/pages/other-page.tsx:11,5
To learn more about routing in InstantSearch, you can follow this guide : https://www.algolia.com/doc/guides/building-search-ui/going-further/routing-urls/react-hooks/
Hi @RobSchilderr,
Could you please confirm the solution I provided works for you so I can close this issue ?
Thank you 🙏
Hey @aymeric-giraudet ,I Appreciate your swift response.
Thank you for answer, really helped clarify this to me. I now need to look into sending a custom query not related to algolia widgets.
🐛 Current behavior
Hello Algolia team,
I hope you're all doing well! I just wanted to start by saying a huge thank you for the amazing work you've put into the Algolia package. It's been an incredibly valuable tool for our project, and we truly appreciate it. Today, I'd like to share a bug that we've come across in hopes of getting some guidance on how to resolve it.
Issue Description:
We are experiencing an issue with the
react-instantsearch-hooks-router-nextjs
package. ThedoNotOverrideBeforePopState
boolean functionality that was present in the experimental package seems to be missing.Previously, we used
instantsearch-router-next-experimental": "^0.0.5
to address the router not getting along with Next.JS. We found that usingcreateInstantSearchNextRouter
withdoNotOverrideBeforePopState: true
resolved the problem:However, in the newer
react-instantsearch-hooks-router-nextjs
package, thedoNotOverrideBeforePopState
prop is no longer available, and we are experiencing the same issue once again.Could you please advise how to replicate the behavior from the experimental package, or if there is an alternative solution for client-side rendering (CSR) only to address this issue?
I apologize for not being able to provide a reproduction at this time, but I hope this description and the provided code snippet are sufficient to understand the issue. Any guidance would be greatly appreciated.
Cheers!
🔍 Steps to reproduce
Set up a Next.js project with Algolia and use the
instantsearch-router-next-experimental
, make sure to omit theserverurl
option.Implement a search using .
Click on a SearchItem, which navigates to the item's detail page.
Use the browser's back button to return to the search results page. You see that the URL state is removed.
Now add the
doNotOverrideBeforePopState:true
prop. Simulate the same behavior. You will see that the URL state is kept.Do the same for the
react-instantsearch-hooks-router-nextjs
package. You will see that the old behavior, seen in step 4, is happening again.Live reproduction
https://codesandbox.io/s/github/algolia/instantsearch.js/tree/templates/react-instantsearch-hooks
💭 Expected behavior
Expected Behavior:
Upon returning to the search results page, the URL state should be preserved, displaying the same search results and filters as before.
Actual Behavior:
The URL state is lost when returning to the search results page, and the search results and filters are reset.
Package version
react-instantsearch-hooks-router-nextjs 6.42.0
Operating system
macOS, Windows
Browser
Chrome
Code of Conduct