Using `<AnimatedRoutes/>` and `set_is_routing` in `<Router/>` together leads to Hydration Bugs

[lazyky]

Describe the bug Using <AnimatedRoutes/> and set_is_routing in <Router/> together leads to Hydration Bugs.

Leptos Dependencies Using the example ssr_modes .

To Reproduce Steps to reproduce the behavior:

1. Using the example ssr_modes .
2. Modify examples/ssr_modes/src/app.rs#L8-L39 as follows:

#[component]
pub fn App() -> impl IntoView {
    // Provides context that manages stylesheets, titles, meta tags, etc.
    provide_meta_context();
    let (is_routing, set_is_routing) = create_signal(true);
    view! {
        <Stylesheet id="leptos" href="/pkg/ssr_modes.css"/>
        <Title text="Welcome to Leptos"/>
        <Router set_is_routing>
            <main>
                <AnimatedRoutes>
                    // We’ll load the home page with out-of-order streaming and <Suspense/>
                    <Route path="" view=HomePage/>

                    // We'll load the posts with async rendering, so they can set
                    // the title and metadata *after* loading the data
                    <Route
                        path="/post/:id"
                        view=Post
                        ssr=SsrMode::Async
                    />
                    <Route
                        path="/post_in_order/:id"
                        view=Post
                        ssr=SsrMode::InOrder
                    />
                </AnimatedRoutes>
            </main>
        </Router>
    }
}

Expected behavior Hydration Bugs will not appear.

Screenshots

Additional context

• I checked the code of leptos and found router/src/components/routes.rs#L505-L528 will cause this error.
• <Routes/> does not have this problem, probably because the id is obtained in router/src/components/routes.rs#L99-L108, but <AnimatedRoutes/> does not

[gbj]

Your two points under additional context are extremely helpful. Is there any chance you might have time to try a fix? I might not have time to work on it very soon but would love a PR.

[bioinformatist]

Yeah @lazyky is my cousin and he said he'll submit a PR to fix it tomorrow:

The snapshot is the chat history in WeChat (the most popular chat app in our country, similar to Discord), I just post it here for fun :D

[lazyky]

I will try to fix it.