How to set default view in AppLayout?

I use the Vaadin 14 AppLayout and the left navigation bar with links which change the content. The works like expected. All links change the path. The Main page with the AppLayout has no route an matches an empty path. But how can I start with a specific page on the empty path?

Problem:
Path: "" → AppLayout without content
Path: “\journal” → AppLayout with JournalView as content

But I also want to see the JournalView on ""!

Code:

@Route
public class MainView extends AppLayout {

    public MainView() {
        addToDrawer(createMenuBar());

        addAttachListener(event -> getUI().ifPresent(ui -> ui.navigate(JournalView.class))); // My Hack
    }

    private VerticalLayout createMenuBar() {
        final RouterLink journal = new RouterLink(getTranslation("app.menu.journal"), JournalView.class);
        final RouterLink profile = new RouterLink(getTranslation("app.menu.profile"), ProfileView.class);
        final RouterLink achievements = new RouterLink(getTranslation("app.menu.achievements"), AchievementsView.class);
        final RouterLink compendium = new RouterLink(getTranslation("app.menu.compendium"), CompendiumView.class);
        final RouterLink about = new RouterLink(getTranslation("app.menu.about"), AboutView.class);
        return new VerticalLayout(journal, profile, achievements, compendium, about);
    }

}
@Route(layout = MainView.class)
public class JournalView extends VerticalLayout {

My current hack is, to redirect after attach to JournalView:
addAttachListener(event -> getUI().ifPresent(ui -> ui.navigate(JournalView.class))); // My Hack
The problem is, with this way a page reload will also navigate to the Journal.

Is there no better way to set a view for the default route?

I also tried to implement BeforeEnterObserver , BeforeEnterListener and tried to redirect in this way:

@Override
public void beforeEnter(BeforeEnterEvent event) {
	if (event.getLocation().getFirstSegment().isBlank()) {
		event.getUI().navigate(JournalView.class);
	}
}

So I can recognize a empty URL and only redirect if nessesary. But with this method the JournalView won’t be shown.

I also tried to set the content of the AppLayout by my own. This works, but how can I inject the JournalView?

Setting both, MainView and JournalView to Route “” also doesn’t work

Navigation targets must have unique routes

So how can I use the AppLayout with start page as content in the correct way?

The sample project is also hosted here:
https://github.com/TobseF/CleanCodeDeveloperJournal

Hi Tobse,

I had the same issue and ended up creating a view with a route for “”, and i forward to the default page in that view in the beforeEnterEvent.

Vaadin also has RouteAlias which I tried as well, but couldn’t get it to work. This was in V10, so things may have improved since.

I don’t know what Issues Martin had with @RouteAlias, it works for me.

A view can only have one @Route, but you can add more routes with @RouteAlias like so:

@Route(value = "journal", layout = MainView.class)
@RouteAlias(value = "", layout = MainView.class)
public class JournalView extends VerticalLayout {
    ...
}

public class MainView extends AppLayout implements RouterLayout {
    ...
}

Don’t forget that MainView must implement RouterLayout so it can successfully be referenced as “layout” in other @Route annotations.
Also, the MainView does not need a @Route annotation. Leaving this annotation will in fact break the solution as vaadin will then find two Views routed to “”. Just remove the @Route, as you will never want to navigate to the MainView directly.

\u0000Thanks for the hint with the @RouteAlias. As you said, I also had to remove the @Route from my MainView and all works like it should!\n\nFixed: https://github.com/TobseF/CleanCodeDeveloperJournal/commit/f7cb6fca954523d69615765ea7084e55d72ae712\n\nI want to add a [SOLVED]
to the title, but I can’t edit it. But for me it is \uD83D\uDE09\n\nAgain, thanks alot and I wish you a Merry Christmas \uD83C\uDF84\n\n

Kaspar Scherrer:
I don’t know what Issues Martin had with @RouteAlias, it works for me.

When I tried it back in V10 it didn’t load the AppLayout correctly. Seems to be working just fine now though - and I could get rid of the hack :slight_smile: