fix: Clean outlet automatically (#19851)

Remove outlet for layout element automatically so that we don't end up with multiple outlets on the page.
vaadin · Aug 30, 2024 · c8ff229 · c8ff229
1 parent 3dc38a6
commit c8ff229
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/flow-server/src/main/java/com/vaadin/flow/component/internal/UIInternals.java b/flow-server/src/main/java/com/vaadin/flow/component/internal/UIInternals.java
@@ -41,6 +41,7 @@
 import com.vaadin.flow.component.HasElement;
 import com.vaadin.flow.component.HeartbeatEvent;
 import com.vaadin.flow.component.HeartbeatListener;
+import com.vaadin.flow.component.Tag;
 import com.vaadin.flow.component.UI;
 import com.vaadin.flow.component.dependency.JavaScript;
 import com.vaadin.flow.component.dependency.StyleSheet;
@@ -855,7 +856,13 @@ && getRouter().getRegistry()
                         .createComponent((Class<? extends Component>) getClass()
                                 .getClassLoader().loadClass(
                                         "com.vaadin.flow.component.react.ReactRouterOutlet"));
-                ((RouterLayout) target).showRouterLayoutContent(reactOutlet);
+                RouterLayout layout = (RouterLayout) target;
+                layout.getElement().getChildren()
+                        .filter(element -> element.getTag()
+                                .equals(reactOutlet.getClass()
+                                        .getAnnotation(Tag.class).value()))
+                        .forEach(Element::removeFromParent);
+                layout.showRouterLayoutContent(reactOutlet);
             } catch (ClassNotFoundException e) {
                 throw new IllegalStateException(
                         "No ReactRouterOutlet available on classpath", e);