fail to work with Next.js Client-side navigations ( next/router, next/link )

Hi. I’m using search-ui with my Next.js project. But I found that when I navigate away from the search page to another page using the Client-side navigations, I cannot go back by using the browser “back” button (I’ve only tried chrome.)

It seems to be the only lib that support elastic-app-search. Is it correct?

How to replicate:

1. Run this demo repo
2. visit search page localhost:3001/search
3. click go home page at the top of sidebar
4. when home page complete rendering, click your browser back button like this:

Problematic result: The URL do change to localhost:3001/search?...... but page remains in home page.

I’m not sure this issue come from search-ui, not from Next.js. I guess this issue has something relate to Smart URL – which I want to understand more but couldn’t find much documents.

BTW I also tried search-ui with react router, they worked well with each other.

Any hint?

[Yurii-Adamenko]

We also have this issue. Our workaround:

1. Change trackUrlState to false (it actually fixes the issue, but if you want track URL state go to 2 and 3).
2. Use onSearch to push state to query (you can use https://github.com/elastic/search-ui/blob/cb774e2ab1e6831ff40523c62d76b57d4c71ed5f/packages/search-ui/src/URLManager.js or write your own)

   onSearch: (state, queryConfig, next) => {
      const searchString = stateToQueryString(state)

      router.replace(
        `${window.location.pathname}?${searchString}`,
        undefined,
        { shallow: true }
      )

      return next(state, queryConfig)
    }

1. Take the query params and set it to initialState on the component mount

Hope this will help

[jason-den]

@Yurii-Adamenko Nice workaround.