Search results don't re-render when navigating back in browser history when using NextJS Link

[janoschherrmann]

Describe the bug I have implemented a Search UI using React and NextJS. The problem occurs, when I'm trying to use the <Link></Link> component from NextJS (https://nextjs.org/docs/api-reference/next/link). When wrapping my CustomResult in a Link tag, navigating to the single result page works perfectly, but when trying to go back in browser history, the url path changes back accordingly, but the Search UI isn't rendered. Instead, I keep seeing the single result page. When using an <a> tag for the same purpose, everything works fine as the page is fully re-rendered.

To Reproduce

1. Set up a test project with NextJS & Search UI
2. Set up a basic search experience, where single search results link to a dynamic route
3. Create a custom <Result/> component and wrap it in a <Link> tag
4. Try navigating between the search results page and the single result page to see the issue

Expected behavior When navigating back, the search results page should render correctly, according to the filters set previously and displayed in the url.

Which backends and packages are you using: "dependencies": { "@elastic/react-search-ui": "1.7.0", "@elastic/react-search-ui-views": "1.7.0", "@elastic/search-ui-app-search-connector": "1.7.0", "@headlessui/react": "1.4.2", "@heroicons/react": "1.0.5", "@tailwindcss/forms": "0.3.4", "@tailwindcss/typography": "0.4.1", "firebase": "9.6.0", "next": "12.0.3", "prop-types": "15.7.2", "react": "17.0.2", "react-dom": "17.0.2"

[joemcelroy]

Thanks for creating a bug. We will take a look at the issue. In meantime, continue to use the native A link element.

[botelastic[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Is this issue still important to you? If so, please leave a comment and let us know. As always, thank you for your contributions.

[janoschherrmann]

Yes, it would be awesome if this would be fixed

[joemcelroy]

We documented how to integrate nextjs routing with search-ui https://docs.elastic.co/search-ui/guides/nextjs-integration#integrating-search-ui-with-nextjs-router