Routing doesn't work

[ivnsch]

Problem

This site: https://github.com/ivanschuetz/swaplink
works correctly when ran locally (as per readme's instructions).

Routes:

pub enum AppRoute {
    #[to = "/submit/{}"]
    Submit(String),
    #[to = "/"]
    Generate,
}

When deploying to a remote server, the /submit/{} route doesn't work anymore:
http://swaplink.xyz/submit/sdfs

Uncaught SyntaxError: Unexpected token '<'

Root still works:
http://swaplink.xyz

I was told to add this code: https://github.com/yewstack/yew/blob/0.18.0/examples/router/src/switch.rs#L21-L88

Which I did in this branch: ivnsch/swaplink#1

With the only effect that now locally the routing for /submit/{} also doesn't work (differently to the remote server here it shows "Route doesn't match" on the UI (or similar, don't remember the exact wording).

I tried to debug the issue by copy pasting my code into the yew example, and it works there. Maybe it's related with the fact that I'm using wasm-pack (I need it because of an npm dependency)?

Environment:

• Yew version: v0.18
• Rust version: 1.54.0
• Build tool, if relevant: see repo: npm, wasm-pack plugin.

I doubt that it's relevant, but just in case this is my nginx config:

server {
     listen 80 default_server;
     listen [::]:80 default_server;
     root /srv/sites/swaplink;
     index index.html;
     try_files $uri $uri/submit /index.html;
}

where /srv/sites/swaplink contains the files generated in the dist folder (as per readme).

With another server, e.g:

python -m http.server 3000

it shows 404:
http://swaplink.xyz:3000/submit/sdsf
Root works:
http://swaplink.xyz:3000

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

* I don't really have time but if it's a must to fix it quickly I can look into it, with some guidance.

[mc1098]

Hi 👋

So I've had a look at this and realised that the router example I pointed you towards makes use of the base element in order to keep the Document::base_uri call consistent. You can see in the index.html of the router example that Trunk is setting the base href here as explained on their assets page.

In terms of solutions you can follow the same tactic of creating a base element with the href value of the absolute url of the web app. This can be a pain cause you have to twiddle with the html for localhost and remote.

Otherwise another solution in mind is using the cfg! macro to return a different base url depending on whether you are in debug or release, something like:

impl PublicUrlSwitch {
    fn base_url() -> Url {
        if cfg!(debug_assertions) {
            Url::new("https://localhost:8000").unwrap()
        } else {
            Url::new("REMOTE_URL").unwrap()
        }
    }
    // rest omitted for brevity

Where "REMOTE_URL" is probably http://swaplink.xyz:3000 based on your issue.

I'm not sure if this is the best/blessed solution to the problem but will hopefully get your web app working remotely 🙏

[ivnsch]

Hi @mc1098! Thanks very much for your response, unfortunately I was short of time and ended migrating the UI to React (also because of other issues, one of which we discussed). I'll keep an eye on Yew for future projects! Using Rust to build the UI is very convenient (can extra confirm after writing the JS glue for React).

[atomikigai]

I have other problem with Route, Don't work, I hope the team can fix this

[lausek]

Same for me. Also, it is very likely that v0.19.0 won't solve this problem. I'm already using the master branch and my router returns 404 errors on my deployed page.

[voidpumpkin]

Same for me. Also, it is very likely that v0.19.0 won't solve this problem. I'm already using the master branch and my router returns 404 errors on my deployed page.

Helped this person in discord.
He was using github pages that would try to serve a file with his navigated path instead of just navigating to index.html and later yew-router would update the route.

[lausek]

@voidpumpkin That + the fact that you have to use Link instead of a if you want to build a SPA. Thanks again!

[hamza1311]

Closing this since yew-router 0.16 has been released which is a complete rewrite and should resolve the issue.