yew-router

Yew 前端框架的路由库。

阅读如何在 yew.rs 上使用它

lib.rs:

提供使用浏览器历史API构建单页面应用（SPA）的路由功能，使用 Yew 网页框架。

用法

use yew::functional::*;
use yew::prelude::*;
use yew_router::prelude::*;

#[derive(Debug, Clone, Copy, PartialEq, Routable)]
enum Route {
    #[at("/")]
    Home,
    #[at("/secure")]
    Secure,
    #[not_found]
    #[at("/404")]
    NotFound,
}

#[function_component(Secure)]
fn secure() -> Html {
    let navigator = use_navigator().unwrap();

    let onclick_callback = Callback::from(move |_| navigator.push(&Route::Home));
    html! {
        <div>
            <h1>{ "Secure" }</h1>
            <button onclick={onclick_callback}>{ "Go Home" }</button>
        </div>
    }
}

#[function_component(Main)]
fn app() -> Html {
    html! {
        <BrowserRouter>
            <Switch<Route> render={switch} />
        </BrowserRouter>
    }
}

fn switch(routes: Route) -> Html {
    match routes {
        Route::Home => html! { <h1>{ "Home" }</h1> },
        Route::Secure => html! {
            <Secure />
        },
        Route::NotFound => html! { <h1>{ "404" }</h1> },
    }
}

内部结构

路由器将自己注册为上下文提供者，并通过 hooks 或 RouterScopeExt 使位置信息和导航器可用。

状态

Location API提供了一种访问/存储与会话历史记录相关联的状态的方法。有关详细用法，请参阅location.state()。这是一个提供通用会话历史记录和位置信息的模块。导入 yew-router 时要导入的预置模块。

此模块重新导出从包中常用的类型。