Problem with showing a ParentRoute's child route HTML content (<Outlet/>) in Leptos 0.7

[okami-fellow]

Describe the bug
While on the ParentRoute page (in this example, on homepage), clicking on "A" link with child route won't load HTML content of route's corresponding function.

Leptos Dependencies

[dependencies]
leptos = { version = "0.7.0", features = ["nightly"] }
leptos_router = { version = "0.7.0", features = ["nightly"] }
axum = { version = "0.7", optional = true }
console_error_panic_hook = "0.1"
leptos_axum = { version = "0.7.0", optional = true }
leptos_meta = { version = "0.7.0" }
tokio = { version = "1", features = ["rt-multi-thread"], optional = true }
tower = { version = "0.4", optional = true }
tower-http = { version = "0.5", features = ["fs"], optional = true }
wasm-bindgen = "=0.2.96"
thiserror = "1"
tracing = { version = "0.1", optional = true }
http = "1"

[features]
hydrate = ["leptos/hydrate"]
ssr = [
    "dep:axum",
    "dep:tokio",
    "dep:tower",
    "dep:tower-http",
    "dep:leptos_axum",
    "leptos/ssr",
    "leptos_meta/ssr",
    "leptos_router/ssr",
    "dep:tracing",
]

To Reproduce
Steps to reproduce the behavior:

1. Install base template: cargo leptos new --git https://github.com/leptos-rs/start-axum
2. Change <Route path=StaticSegment("") view=HomePage/> to

<ParentRoute path=StaticSegment("") view=HomePage >
    <Route path=StaticSegment("") view=|| view! {""} />
    <Route path=StaticSegment("test") view=Test />
</ParentRoute>

3. Add "A", "ParentRoute" and "nested_router::Outlet" to "use leptos_router"

use leptos_router::{
    components::{A, Route, Router, Routes, ParentRoute},
    StaticSegment,
    nested_router::Outlet
};

4. Move <Title text="Welcome to Leptos"/> from App() function to HomePage() in app.rs file
5. Add to HomePage() function

<div><A href="test">"Go to Test page"</A></div>
<Outlet/>

6. Add Test() function to app.rs

#[component]
fn Test() -> impl IntoView {
    view! {
        <Title text="Test page"/>
        <h1>"New page title"</h1>
        "Line that will prevail"
        <div><A href="/">"Go to Home page"</A></div>
    }
}

7. Compile cargo leptos serve
8. Click on "Go to Test page" link:

• Page title will change to "Test page"
• URL will change to "http://127.0.0.1:3000/test"
• Content of Test() function will NOT appear

9. Click on URL box and manualy enter "http://127.0.0.1:3000/test":

• Page title will change to "Test page"
• URL will change to "http://127.0.0.1:3000/test"
• Content of Test() function WILL appear

10. Click on "Go to Home page":

• Page title will NOT change from "Test page" to "Welcome to Leptos"
• URL will change to "http://127.0.0.1:3000"
• Text "Line that will prevail" will ramain
• Everything else from Test() fn will disappear

11. Click on "Go to Test page" link again:

• Test() fn will appear
• Text "Line that will prevail" will be dublicated (showed twice)

12. Click on "Go to Home page" again:

• Page title will NOT change from "Test page" to "Welcome to Leptos"
• Text "Line that will prevail" will remain

Expected behavior
While on the homepage, by clicking on "Go to Test page" link with child route, load HTML content of route's corresponding Test() function.

Screenshots
https://github.com/user-attachments/assets/e696f737-7e4a-428c-82d8-341e397d2bc9

Additional context

• On leptos 0.6 there was no such problem;
• I tried the same process on a different PC (Windows) and under a virtual machine (Linux). Results are the same;
• On mobile phone, if I enter homepage URL manually, child page act like on PC (what I described above);
• On mobile phone, if I load homepage from bookmark child page loads ok;
• On mobile phone (Android), I tried Chrome, Brave, Firefox, Opera browsers;
• On mobile phone I get website through Wi-Fi from PC localhost;
• Line with text that remains after going back to the homepage is that in simple text form "like this". If add tags <p>"like this"</p> it won't remain and will disappear like it supposed;
• rustup 1.27.1 (54dd3d00f 2024-04-24);
• Installed toolchains: nightly-x86_64-pc-windows-msvc;
• installed targets for active toolchain: wasm32-unknown-unknown;
• active toolchain: rustc 1.85.0-nightly (acabb5248 2024-12-04);
• cargo-leptos 0.2.22;
• cargo generate 0.19.0;
• I am very sorry if the cause is some stupidity on my part.

app.rs file

use leptos::prelude::*;
use leptos_meta::{provide_meta_context, MetaTags, Stylesheet, Title};
use leptos_router::{
    components::{A, Route, Router, Routes, ParentRoute},
    StaticSegment,
    nested_router::Outlet
};

pub fn shell(options: LeptosOptions) -> impl IntoView {
    view! {
        <!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="utf-8"/>
                <meta name="viewport" content="width=device-width, initial-scale=1"/>
                <AutoReload options=options.clone() />
                <HydrationScripts options/>
                <MetaTags/>
            </head>
            <body>
                <App/>
            </body>
        </html>
    }
}

#[component]
pub fn App() -> impl IntoView {
    // Provides context that manages stylesheets, titles, meta tags, etc.
    provide_meta_context();    

    view! {
        // injects a stylesheet into the document <head>
        // id=leptos means cargo-leptos will hot-reload this stylesheet
        <Stylesheet id="leptos" href="/pkg/test.css"/>        

        // content for this welcome page
        <Router>
            <main>
                <Routes fallback=|| "Page not found.".into_view()>

                    <ParentRoute path=StaticSegment("") view=HomePage >
                        <Route path=StaticSegment("") view=|| view! {""} />
                        <Route path=StaticSegment("test") view=Test />
                    </ParentRoute>

                </Routes>
            </main>
        </Router>
    }
}

/// Renders the home page of your application.
#[component]
fn HomePage() -> impl IntoView {
    // Creates a reactive value to update the button
    let count = RwSignal::new(0);
    let on_click = move |_| *count.write() += 1;

    view! {
        <Title text="Welcome to Leptos"/>
        <h1>"Welcome to Leptos!"</h1>
        <button on:click=on_click>"Click Me: " {count}</button>
        <div><A href="test">"Go to Test page"</A></div>
        <Outlet/>
    }
}

#[component]
fn Test() -> impl IntoView {

    view! {
        <Title text="Test page"/>
        <h1>"New page title"</h1>
        "Line that will prevail"
        <div><A href="/">"Go to Home page"</A></div>
    }
}

[gbj]

I just cloned the starter template, copied and pasted in the complete example you give at the end, and it works correctly, so I'm sorry to say I can't reproduce the issue you're having.

[okami-fellow]

I just cloned the starter template, copied and pasted in the complete example you give at the end, and it works correctly, so I'm sorry to say I can't reproduce the issue you're having.

Based on the behavior that I described, maybe you could think of some idea, what could I try to do?

[gbj]

Okay, reading through the additional context: I missed that this was in nightly. When I also tried with nightly, I get the same issue. (The issue does not occur on stable.)

[gbj]

Should be closed by #3336.