AppLayout and RouterLink problem

In my web application, i faces some problems.
When i enter my application it shows like (1.png) . After login as an admin it shows like (adminButton.png) . when i click on the admin panel it goes another views like(admin.png) .But i want to view this on the mainview with applayout menu.

Mainview.class is containing applayout menu and i set homeUi.class in the appLayout for seeing first when i load my browser. When i set my AdminPanel layout to the mainview it seems like(2.png). it overlaps with the previous one. But i want to remove first content and set other views here.

As a beginner it seems hard to me to set routes and layouts. How can i do that.

Thanks in advance.

My classes are ;

@Viewport(“width = device-width, minimum-scale=1.0, initial-scale =1.0, user-scalable=yes”)
public class MainView extends VerticalLayout implements RouterLayout {

private HomeUi homeUi = new HomeUi();
private AppLayout appLayout = new AppLayout();
private AppLayoutMenu menu = appLayout.createMenu();
private Tabs tabs = new Tabs();

private HorizontalLayout routerLayout = new HorizontalLayout();
public MainView() {

private void headerDiv() {

            new AppLayoutMenuItem(VaadinIcon.HOME.create(), "Home", "homeUi"),
            new AppLayoutMenuItem(VaadinIcon.COINS.create(), "Live Scores"),
            new AppLayoutMenuItem(VaadinIcon.LIST_SELECT.create(), "Schedule"),
            new AppLayoutMenuItem(VaadinIcon.RECORDS.create(), "Archives"),
            new AppLayoutMenuItem(VaadinIcon.NEWSPAPER.create(), "News"),
            new AppLayoutMenuItem(VaadinIcon.TROPHY.create(), "Series"),
            new AppLayoutMenuItem(VaadinIcon.USER_CARD.create(), "Team"),
            new AppLayoutMenuItem(VaadinIcon.SIGN_OUT.create(), "Log Out", e -> AccessControlFactory.getInstance().createAccessControl().signOut()));



@RouteAlias(value = “homeUi”,layout = MainView.class)
@RouteAlias(value = “”,layout = MainView.class)
public class HomeUi extends VerticalLayout {

private ApiService apiService = new ApiService();

private VerticalLayout recentTimeLineLayout = new VerticalLayout();
private VerticalLayout topTimeLineLayout = new VerticalLayout();
private HorizontalLayout dividerLayout = new HorizontalLayout();
private Footer footer = new Footer();

public HomeUi() {}

public class AdminPanel extends VerticalLayout implements RouterLayout {
public static final String VIEW_NAME = “Admin Panel”;

private Button insertBallButton = new Button("Insert Ball");
private Button insertCoachButton = new Button("Insert Coach");
private Button insertGroundButton = new Button("Insert Ground");
private Button insertMatchButton = new Button("Insert Match");
private Button insertPlayerButton = new Button("Insert Player");
private Button insertTeamButton = new Button("Insert Team");
private Button homeButton = new Button("Home");

private HorizontalLayout navBar = new HorizontalLayout();
private HorizontalLayout nav = new HorizontalLayout();
private Button label = new Button("GameStats");

public AdminPanel() {}

@Route(value = "insertball", layout = AdminPanel.class)
public class InsertBall extends VerticalLayout  {

public InsertBall() {}


Hello! I am facing the same issue as yours. Please let me know if you found any solution.