fix: leptos_router hydration issues (#450)

leptos_dom/src/components/dyn_child.rs

@@ -1,4 +1,7 @@
-use crate::{hydration::HydrationCtx, Comment, IntoView, View};
+use crate::{
+  hydration::{HydrationCtx, HydrationKey},
+  Comment, IntoView, View,
+};
 use cfg_if::cfg_if;
 use leptos_reactive::Scope;
 use std::{borrow::Cow, cell::RefCell, fmt, ops::Deref, rc::Rc};
@@ -7,8 +10,6 @@ cfg_if! {
     use crate::{mount_child, prepare_to_move, unmount_child, MountKind, Mountable};
     use leptos_reactive::{create_effect, ScopeDisposer};
     use wasm_bindgen::JsCast;
-  } else {
-    use crate::hydration::HydrationKey;
   }
 }
 
@@ -77,9 +78,7 @@ impl Mountable for DynChildRepr {
 }
 
 impl DynChildRepr {
-  fn new() -> Self {
-    let id = HydrationCtx::id();
-
+  fn new_with_id(id: HydrationKey) -> Self {
     let markers = (
       Comment::new(Cow::Borrowed("</DynChild>"), &id, true),
       #[cfg(debug_assertions)]
@@ -124,6 +123,7 @@ where
   CF: Fn() -> N + 'static,
   N: IntoView,
 {
+  id: crate::HydrationKey,
   child_fn: CF,
 }
 
@@ -135,7 +135,12 @@ where
   /// Creates a new dynamic child which will re-render whenever it's
   /// signal dependencies change.
   pub fn new(child_fn: CF) -> Self {
-    Self { child_fn }
+    Self::new_with_id(HydrationCtx::id(), child_fn)
+  }
+
+  #[doc(hidden)]
+  pub fn new_with_id(id: HydrationKey, child_fn: CF) -> Self {
+    Self { id, child_fn }
   }
 }
 
@@ -149,9 +154,9 @@ where
     instrument(level = "trace", name = "<DynChild />", skip_all)
   )]
   fn into_view(self, cx: Scope) -> View {
-    let Self { child_fn } = self;
+    let Self { id, child_fn } = self;
 
-    let component = DynChildRepr::new();
+    let component = DynChildRepr::new_with_id(id);
 
     #[cfg(all(target_arch = "wasm32", feature = "web"))]
     let closing = component.closing.node.clone();

leptos_dom/src/components/errors.rs

@@ -34,7 +34,6 @@ where
                 on_cleanup(cx, move || {
                   queue_microtask(move || {
                     errors.update(|errors: &mut Errors| {
-                      crate::log!("removing error at {id}");
                       errors.remove::<E>(&id);
                     });
                   });

router/src/components/outlet.rs

@@ -7,6 +7,7 @@ use leptos::*;
 /// that child route is displayed. Renders nothing if there is no nested child.
 #[component]
 pub fn Outlet(cx: Scope) -> impl IntoView {
+    let id = HydrationCtx::id();
     let route = use_route(cx);
     let is_showing = Rc::new(Cell::new(None::<(usize, Scope)>));
     let (outlet, set_outlet) = create_signal(cx, None::<View>);
@@ -32,5 +33,5 @@ pub fn Outlet(cx: Scope) -> impl IntoView {
         }
     });
 
-    move || outlet.get()
+    leptos::DynChild::new_with_id(id, move || outlet.get())
 }

router/src/components/routes.rs

@@ -29,7 +29,6 @@ pub fn Routes(
     let base_route = router.base();
 
     let mut branches = Vec::new();
-    let id_before = HydrationCtx::peek();
     let frag = children(cx);
     let children = frag
         .as_children()
@@ -195,6 +194,7 @@ pub fn Routes(
     });
 
     // show the root route
+    let id = HydrationCtx::id();
     let root = create_memo(cx, move |prev| {
         provide_context(cx, route_states);
         route_states.with(|state| {
@@ -216,8 +216,8 @@ pub fn Routes(
         })
     });
 
-    HydrationCtx::continue_from(id_before);
-    (move || root.get()).into_view(cx)
+    //HydrationCtx::continue_from(id_before);
+    leptos::DynChild::new_with_id(id, move || root.get())
 }
 
 #[derive(Clone, Debug, PartialEq)]