dioxus

dioxus copied to clipboard

Problem Nested Routes do not work while they should based on https://dioxuslabs.com/nightly/router/guide/building-a-nest.html

Steps To Reproduce Create an app:

pub fn app(cx: Scope) -> Element {
    cx.render(rsx! {
        Router {
            Route { to: "/", "I am homepage"}
            Route {
                to: "/blog",
                p { "-- Blog --" }
                Route { to: "/post", "I am blog post" }
            }
            Route { to: "", "Oops, 404"}
        }
    })
}

Steps to reproduce the behavior:

• Navigate to /blog/post

Expected behavior

Based on https://dioxuslabs.com/nightly/router/guide/building-a-nest.html I would expect the "I am blog post" text to be rendered, instead it renders "Oops, 404"

Environment:

• Dioxus version: dioxus = {version = "0.2.4", features = ["web", "router"]}
• Rust version: 1.61.0 stable
• OS info: MacOS
• App platform: web

Questionnaire

• [ ] I'm interested in fixing this myself but don't know where to start
• [ ] I would like to fix and I have a solution
• [ ] I don't have time to fix this right now, but maybe later
• [x] I am probably not good enough at Rust to fix it myself

I can confirm that this is an issue on Linux as well, 0.2.4 and master. Thanks for the report!

Not sure if this is known already (and probably doesn't matter if the router is getting a complete rewrite), but mostly likely related: it seems nesting routes inside ANY non-dioxus_elements will fail, not just Routes nested inside other Routes.

Ex:

fn routes(cx: Scope) -> Element {
    cx.render(rsx! {
        Route { to: "/", "I am homepage"}
        Route {
            to: "/blog",
            p { "-- Blog --" }
            Route { to: "/post", "I am blog post" }
        }
        Route { to: "", "Oops, 404"}
    })
}

pub fn app(cx: Scope) -> Element {
    cx.render(rsx! {
        Router {
            self::routes {}
        }
    })
}

Nested routes were added as part of #1020

seems like the function names have to be snake case. One of my code got work even there is #![allow(non_snake_case)] already.