Leptos 0.8.12 NestedRoutesView Hydration Error

[PlanBernhard]

Issue

Hydration error in NestedRoutesView with multi-app Axum setup

Error Message

A hydration error occurred while trying to hydrate an element defined at src/apps/app_a/app.rs:29:118 The framework expected a text node, but found this instead: JSHandle@node

Stack: NestedRoutesView → EitherOf3 → String hydration

Environment

• OS: Windows 11 (I switch to Linux Fedora in a few weeks)
• Leptos: 0.8.12
• SSR: Axum with multiple separate Leptos instances (see setup below)
• Rust: 1.91.0 (check date with rustc --version)
• Browser: Brave, Edge
• Important: App works perfectly despite console error

Setup

Multiple isolated Leptos apps mounted at different Axum routes:

// main.rs - Axum level
.nest("/app-a", app_a_routes)  // Leptos Instance 1
.nest("/app-b", app_b_routes)  // Leptos Instance 2

Each app has its own starting at relative paths.

Code

#[component]
pub fn AppA() -> impl IntoView {
    view! {
        <Router>
            <Navigation />
            <main>
                <Routes fallback=|| view! { <div>"404"</div> }>
                    <Route path=StaticSegment("") view=|| view! { <Homepage/> }/>
                    <Route path=StaticSegment("about") view=|| view! {
                        <Layout title="About"><About /></Layout>
                    }/>
                </Routes>
            </main>
            <Footer />
        </Router>
    }
}

Attempted Solutions (All Failed)

✅ Routes fallback: || “text”.into_view()
✅ Routes fallback: || view! { <div>“text”</div> }.into_any()
✅ All routes: view=|| view! { <Component/> }.into_any()
✅ Whitespace/newlines between tags removed
✅ Conditional rendering with <Show> + || () fallback
✅ Router structure: fragment wrapping, skip link outside router
✅ Wrapper <div> around <Routes> inside <main>
✅ trailing_slash=TrailingSlash::Exact
✅ ssr=SsrMode::PartiallyBlocked
✅ Routes fallback variants: || "text".into_view(), .into_any()
✅ All routes with .into_any()
✅ Whitespace/newlines removed
✅ wrapper around
✅ Separate page components vs inline closures

Question

Is this a known limitation when mounting Leptos at non-root paths (/app-a/*)?
Are there recommended pattern for multi-Leptos setups?

[gbj]

The Router has a base prop, which I don't see mentioned in your attempts above.

[gbj]

i.e., you need to set the Router base on the client and, I suppose in this case, to not set it on the server. When you land at /app-a/about the client side is looking for an /app-a/about route, which does not exist in the route definitions, and is therefore trying to hydrate the fallback; whereas your server has rendered About

[PlanBernhard]

That was the solution. 🤦‍♂️After many days, finally a solution. Thank you very much. ♥️