Yew: Router/Routing can't handle enter url from address bar or pressing refresh button

[thienpow]

tried running the Routing example, it will return error Cannot GET /a if you enter the URL http://localhost:8000/a manually.

how to handle this if user copied/bookmarked the url and trying to return to this page?

[jstarry]

@hgzimmerman do you mind looking into this?

[hgzimmerman]

This is expected behavior.

Either you need to prepend all routes with a #, which causes everything after it to not be sent to the server, or you need the server to return the index.html's content when you encounter URL for a resource what would otherwise be a 404 (eg, one of your routes).

Using # is generally a bad practice (or is at the very least dated), and cargo web doesn't support the 404 "redirect" trick.
Parcel does support the 404 trick out of the box, and I can't say for the WebPack template.

I think the router example can be removed from this project given that a dedicated crate exists for routing.
I think that the router repo should have a couple of example servers (warp, actix, rocket) showing how to write your server so it has this behavior.

[thienpow]

thanks @hgzimmerman i finally got it working with #
i think i understand how to handle the /path/subpath/ at webserver if not using #

btw i was not able to get the tag response to the change of route by following the sample in example/router_compoent folder, so i am using this
RouterAgent::bridge method as shown in the image

[hgzimmerman]

I think that this can be closed now, given that an example server exists in the router repo, and that better support for fragment routing is planned. The question author appears to have come to a suitable solution.

[fanux]

I still 404 after click browser refresh ...

    #[to = "#/app/{appName}"]
    App(String),
    #[to = "#/a/{anything}"]
    A(String),
    #[to = "#/b/{anything}/{number}"]
    B { anything: String, number: u32 },
    #[to = "#/c"]
    C,

                    AppRoute::App(s) => format!("#/app/{}", s),
                    AppRoute::A(s) => format!("#/a/{}", s),
                    AppRoute::B { anything, number } => format!("#/b/{}/{}", anything, number),
                    AppRoute::C => "#/c".to_string(),



md5-52214d9b96454b160eea71779b3e2078



                   match AppRoute::switch(self.route.clone()) {
                        Some(AppRoute::App(thing)) => self.app_info(thing),
                        Some(AppRoute::A(thing)) => VNode::from(thing.as_str()),
                        Some(AppRoute::B{anything, number}) => html!{<div> {anything} {number} </div>},
                        Some(AppRoute::C) => self.apps(),
                        None => VNode::from("404")
                    }