Vaadin 14.4.0 manipulate the back/forward history buttons (onHashChange perhaps)

I have a single page, single class Vaadin project. In this project, I might change the layout to make it seem as if a new page has been entered. But since no new link/page is approached, I cannot figure out how to allow users to "return" to the previous element.

For a bit, I thought I could change the url, and then catch whether people used the forward or backward buttons. I have found hashChange events, but I cannot make sense of it or make it work. Vaadin has a HistoryChangeEventHandler, but it does not listen for hashChanges, and as such my solution would not work.

I am coming up short with regards to solving this. I found this thread from 2019, which seems to be a solution to my issue, but I cannot make the code work. I suppose I am trying to pass a wrong element to the javaScript execution.

So, I have a simple mainview that extends a div. In this div, I have the following code:

History history = UI.getCurrent().getPage().getHistory();
    TextField textField = new TextField();
    add(textField);

    Button button = new Button();
    button.setText("New link");
    button.addClickListener(e-> history.pushState(null, "#"+textField.getValue()));
    add(button);

    Button button1 = new Button();
    button1.setText("Go back");
    button1.addClickListener(e-> history.back());
    add(button1);

    getElement().executeJs(
            "const serverCallback = element.$server.onHashChange; this.window.addEventListener('hashchange', function () {serverCallback(location.hash);}, false);"
    );

@ClientCallable
public void onHashChange(String hash) {
    System.out.print("test "+hash);
}

I expected that the onHashChange method would be called. But I am getting a javascript error saying: (ReferenceError) : element is not defined.

Working solution:

getElement().executeJs("const serverCallback = $0.$server.onHashChange;" +
            "window.addEventListener('hashchange', function () {serverCallback(location.hash);}, false);",  getElement());

My getElement() is the extended div, I guess. And here is my onHashChange method.

@ClientCallable
public void onHashChange(String location) {
    System.out.println("Current location is: " + location);
}

Also, if you ever wanted to just call a java method from vaadin. You can do the following:

getElement().executeJs("$0.$server.onHashChange(\"It works\");",  getElement());

Good luck! And thank you Erik for taking the time to help out.

Looking at the JavaDoc for executeJs, it says:

 * Asynchronously runs the given JavaScript expression in the browser in the
 * context of this element.
 * ...
 * This element will be available to the expression as <code>this</code>.

So try replacing element.$server with this.$server.