Vaadin 13 AppLayout [MenuItems] - routing error

Hello,

I’m having some troubles using the MenuItems of the AppLayout.
Basically it is working fine. I can add AppLayoutMenuItem components to the menu of the AppLayout. And the basic routing is working.

At default the Menu should highlight the route you are currently on. This is not working. For example: If I am clicking on the “Login” Tab of the menu, the Login View shows up, but no Tab is highlighted. (You see the Menu reloading / or rebuilding) When I click on the “Login” Tab when I am already on the LoginView the menu now highlights “Login”.

Also: If I reload a page using the F5 key, I get the error “Assertion error: No child node found with id -1”

I think I am using the AppLayout wrong. I think it shouldn’t be recreated everytime I load a page.

LoginView.java:

@Route("login")
public class LoginView extends VerticalLayout {
	public LoginView(@Autowired MessageBean bean) {
		add(UiSupport.getAppLayout());
		...
	}
}

UiSupport.java:

public class UiSupport {
	...    
    public static AppLayout getAppLayout(){
        AppLayout appLayout = new AppLayout();

        AppLayoutMenu menu = appLayout.createMenu();
        ...
        menu.addMenuItems(
                new AppLayoutMenuItem("Dashboard", "dashboard"),
                new AppLayoutMenuItem("Login", "login")
        );
		...
        return appLayout;
    }
}

Fixed the not working menu highlighting.
Still get “Assertion error: No child node found with id -1” error when reloading the current page.

Yes, there is some issues like that in AppLayout, like this one

https://github.com/vaadin/vaadin-app-layout-flow/issues/73

Here is an example how to workaround that

https://github.com/TatuLund/devday-demo-flow/blob/master/src/main/java/com/vaadin/devday/demo/MainLayout.java

Also: If I reload a page using the F5 key, I get the error “Assertion error: No child node found with id -1”

I think I am using the AppLayout wrong. I think it shouldn’t be recreated everytime I load a page.

Yes, this was my error. I created a new AppLayout instance on every refresh. I solved this problem using a checker with the following getter method on instantiation.

public AppLayout getAppLayout() {
	return Objects.requireNonNullElseGet(appLayout, AppLayout::new);
}