How to control Yew route from external JS in SPA?

[jq170727]

Hello Yew!

I am trying to use Yew in an SPA alongside some external Javascript. I'm looking for the right way to enable the Javascript code to change the current route in my Yew application without causing a network reload. I believe I need a small bit of JS to deliver a message to my Yew app and have the app use the Navigation API.

I took a look around the Yew discussions and found a few ongoing topics that seem somewhat related:

• Frontend backend communication? #2164
• How to create a fetch function (or any callback - requesting function) outside a component #1957
• Subscriptions (like Elm)? #2821

Something like Elm subscriptions may be what I'm looking for. If I were doing this in Elm I'd declare a port, have my Javascript send a message to it and use a subscription to trigger an update to Browser.Navigation.

While looking for examples that send data from JS to Yew I did come across this post from craftyc0der which uses the create method to register some Closures which are later called when data is returned from a Firebase query. I suspect I might be able to do something like that to register a function for my JS to call when it wants to change the Yew route.

So to summarize,

• Is there an idiomatic way to change the Yew router route from external Javascript?
• Is there anything in the Yew ecosystem to allow a Yew SPA to communicate with external Javascript in the way Elm ports do?
• Is there a simpler approach I may be overlooking?

I have also posted this question (How to control Yew route from external JS in SPA?) to Stack Overflow and Reddit r/rust.

I will follow up with a simple example/gist/playground/post/whatever once I work out the details for anyone else curious about how to do this.

[jq170727]

I found a way to do what I need by having

• Yew render a div within a BrowserRouter
• Yew add an EventListener on the div which changes the route when it sees a CustomEvent
• A Javascript function dispatch a CustomEvent to the div when called

See example here: https://github.com/jq170727/change_yew_route_from_js

This works but I'm sure it could be improved. Suggestions or coding advice always appreciated 🙂