如何在 SPA 中控制来自外部 JS 的 Yew 路由？答案

【问题标题】：How to control Yew route from external JS in SPA?如何在 SPA 中控制来自外部 JS 的 Yew 路由？
【发布时间】：2023-02-01 00:47:26
【问题描述】：

我正在尝试在 SPA 中使用 Yew 以及一些外部 Javascript。我正在寻找启用外部 Javascript 代码更改的正确方法我的 Yew 应用程序中的当前路由，而不会导致网络重新加载。

我已经尝试从控制台设置 window.location.href 但是重新加载 Yew 应用程序（如预期的那样），这不是我在此 SPA 中想要的。

我相信我需要一点 Javascript 来传递消息到我的 Yew 应用程序并让我的 Yew 应用程序使用 Navigation API 适当地调用 navigator.push()。

在这是我的第一个 Yew 应用程序之前，我已经使用过一些 Elm。我四处搜索并查看了各种应用程序的源代码以找到 Yew 中一种惯用的方式来做一些事情，比如 Elm 用 ports 启用的东西。在 Elm 中，我会声明一个端口，让我的 Javascript 向它发送一条消息并使用订阅以触发对 Elm 的 Browser.Navigation 模块的更新。

环顾四周时，我确实遇到了article 和chat application通过Yew agent和网络工作者将网络套接字的输入中继到Yew。它非常聪明，但对于我正在尝试做的事情来说似乎有点多。

所以我的问题是：

从外部 Javascript 更改 Yew 路由器路由的惯用方法是什么？
更一般地说，在 Yew 生态系统中是否有任何东西允许 Yew SPA 以 Elm 端口的方式与外部 Javascript 通信？或者有没有更简单的方法？从我读过的内容来看，我认为我可以创建一个在 Yew 中回调并将其注册到外部 JS 可以使用 wasm-bindgen 调用的地方。

【问题讨论】：

几个月前，@athan-clark 似乎有一个 similar question。
看起来 this gist 和来自 craftyc0der 的 blog post 可能提供一种设置 JS -> Yew 回调的方法。

标签： rust routes webassembly wasm-bindgen yew

【解决方案1】：

我找到了一种方法来做我需要的事情

Yew 在 BrowserRouter 中渲染一个 div
Yew 在 div 上添加一个 EventListener，它在看到 CustomEvent 时更改路由
Javascript 函数在调用时将 CustomEvent 分派到 div

示例在这里：https://github.com/jq170727/change_yew_route_from_js

这行得通，但我相信它可以改进。
建议或编码建议总是很感激?。
如果有人可以提出更好的方法，将保留赏金。

【讨论】：

【解决方案2】：

从外部 Javascript 更改 Yew 路由器路由的惯用方法是使用 Yew 的 Router API 及其 push 方法。您可以使用 wasm-bindgen 在 Yew 中公开回调并将其注册到您的外部 JavaScript 代码中。然后，您可以通过调用已注册的回调来触发路由器中的更改。

这是一个例子：

在你的 Yew 组件中：

#[wasm_bindgen]
extern "C" {
    pub fn change_route(route: &str);
}

pub struct Model {
    ...
}

impl Component for Model {
    ...
    fn update(&mut self, msg: Self::Message) -> ShouldRender {
        ...
        match msg {
            ...
            Msg::ChangeRoute(route) => {
                Router::push(route);
                ...
            }
            ...
        }
    }
    ...
}

在您的外部 JavaScript 代码中：

function changeRoute(route) {
    window.change_route(route);
}

现在，您可以通过在外部 JavaScript 代码中调用 changeRoute(route) 来更改 Yew 应用程序中的路由。

【讨论】：