Router outlet between two elements

Flow
1

Hi!
I have a problem. I want to specify where router outlet should appear. Now it’s always as last element of MainView.
I have class like this:

@Push(transport = Transport.LONG_POLLING)
@HtmlImport("styles/shared-styles.html")
@BodySize(height = "100vh", width = "100%")
@StyleSheet("styles/bootstrap.css")
@Viewport("width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes")
@Theme(Lumo.class)
public class MainView extends FlexLayout implements RouterLayout {

	public MainView() {
		getStyle()
				.set("background-image", "url(frontend/images/background.png)")
				.set("background-size", "cover")
				.set("min-height", "100%")
				.set("background-attachment", "fixed")
				.set("--lumo-font-family", "'Lato',Tahoma,Verdana,Arial,sans-serif")
				.set("font-family", "var(--lumo-font-family)")
				.set("box-sizing", "border-box");
		addClassNames("flex-column", "pb-3");
		add(new Label("Top label"));
		//place where router outlet should appear
		add(new Label("Bottom label"));
	}

}

Example:
I have two static elements on page, its Label on top of the page, and eg. Label on bottom of the page. I want to show router outlet between them.

@Route(value = "", layout = MainView.class)
@PageTitle("Landing")
public class LandingPage extends FlexLayout {

	@Override
	protected void onAttach(AttachEvent attachEvent) {
		super.onAttach(attachEvent);
		new Label("content");
	}
}

So when I go on start page with route “” it should look like this:

Top label
content
Bottom label
2

You will need to override the showRouterLayoutContent method in RouterLayout. The default implementation appends the content to the end of the target element:

public interface RouterLayout extends HasElement {
    /**
     * Shows the content of the layout which is the router target component
     * annotated with a {@link Route @Route}.
     * <p>
     * <strong>Note</strong> implementors should not care about old
     * {@code @Route} content, because {@link Router} automatically removes
     * it before calling the method.
     * </p>
     *
     * @param content the content component or {@code null} if the layout content is to be cleared.
     */
    default void showRouterLayoutContent(HasElement content) {
        if (content != null) {
            getElement().appendChild(Objects.requireNonNull(content.getElement()));
        }
    }

-Olli