Why aren't all of my leptos routes registering in my axum backend?

[dnaaun]

So, in the backend, I have:

    let leptos_routes = generate_route_list(web::App);

    Router::new()
        .route_service("/pkg/*rest", server_dir.clone())
        .route_service("/assets/*rest", server_dir)
        .leptos_routes(&state, leptos_routes, {
            move || web::shell(leptos_options.clone())
        })
        .merge(get_api_router(state.clone()))
        .layer(TraceLayer::new_for_http())
        .with_state(state)

And in the frontend, I have:

#[component]
pub fn App() -> impl IntoView {
    view! {
        <SyncEngineProvider>
            <Router>
                <Routes fallback=NotFound>
                    <Route path=path!("/auth") view=Auth />
                    <ParentRoute path=path!("/") view=Sidebar >
                        <Route path=path!("") view=Home />
                        <Route path=path!(":owner_name/:repo_name") view=RepositoryPage />
                        <Route path=path!(":owner_name/:repo_name/:tab") view=RepositoryPage />
                    </ParentRoute>
                </Routes>
            </Router>
        </SyncEngineProvider>
    }
}

But on the backend, doing:

    tracing::info!("{:?}", leptos_routes);

Shows that only the / route is being registered to axum. Indeed, trying to access something like /owner_name/repo_name gives a 404. But if I first load up a /, and then navigate in-app to /owner_name/repo_name, everything is good.

What gives?

[gbj]

If you remove SyncEngineProvider, does it generate the routes correctly?

Hard to know what could be going on, otherwise.

[dnaaun]

Btw, is that expected behavior? If so, documenting it is worth it imo right? (In case I'm in the mood for a documentation PR :) )

[gbj]

Well, I think you're correct that route generation just works synchronously, i.e., it runs the page once but doesn't wait for Suspense etc., under the (in this case, apparently mistaken) assumption that you're not defining routes inside a Suspense, because you're only defining them once overall, not once per request.

Do your route definitions actually depend on the value of the resource you read in that Suspense, or can you move the Suspense inside the view of the outermost route? (If the former, this probably won't work, in the sense that you're only registering the routes with Axum once, but they depend on something that could presumably change per request)

[dnaaun]

Do your route definitions actually depend on the value of the resource you read in that Suspense?

Nope! I only had <SyncEngineProvider> in <App /> because <App /> was the only common ancestor of the components in which I used the context provided by SyncEngineProvider. I'm now doing:

#[component]
pub fn App() -> impl IntoView {
    view! {
        <Router>
            <Routes fallback=NotFound>
                <Route path=path!("/auth") view=sync_engine_provided(Auth) />
                <ParentRoute path=path!("/") view=sync_engine_provided(Sidebar)>
                    <Route path=path!("") view=sync_engine_provided(Home) />
                    <Route
                        path=path!(":owner_name/:repo_name")
                        view=sync_engine_provided(RepositoryPage)
                    />
                    <Route
                        path=path!(":owner_name/:repo_name/:tab")
                        view=sync_engine_provided(RepositoryPage)
                    />
                </ParentRoute>
            </Routes>
        </Router>
    }
}

/// TODO: Refactor such that <SyncEngineProvider> is not a separate component since this function
/// is it's only usgae.
pub fn sync_engine_provided<V>(
    children: impl Fn() -> V + Send + Sync + 'static,
) -> impl leptos_router::ChooseView
where
    V: IntoView + 'static,
{
    let children = Arc::new(children);
    move || {
        let children = children.clone();
        view! { <SyncEngineProvider>{children()}</SyncEngineProvider> }.into_any()
    }
}

[dnaaun]

Sorry, meant to say above "I'm now doing", and not "I'm not doing" above. I've edited it as such.

[gbj]

Another way to do this could be to have a <ParentRoute path=path!("") view=|| view! { <SyncEngineProvider><Outlet/></SyncEngineProvider> }>/* all the other routes */</ParentRoute>