Dioxus框架中路由器（Router）

路由器

在许多应用程序中，你会希望有不同的“场景”。对于网页，这些场景可能是具有自己内容的不同网页。对于桌面应用程序，这些场景可能是应用程序中的不同视图。

为了统一这些平台，Dioxus提供了一个名为Dioxus Router的第一方场景管理解决方案。

它是什么？

对于像Dioxus着陆页（dioxuslabs.com）这样的应用程序，我们希望有几个不同的场景：

• 首页
• 博客

这些场景都是独立的——我们不希望同时渲染首页和博客。

Dioxus路由器使创建这些场景变得简单。为了确保我们在使用路由器，请在你的dioxus依赖中添加router特性：

cargo add dioxus@0.5.0 --features router

使用路由器

与Rust生态系统中的其他路由器不同，我们的路由器是在编译时声明性构建的。这使得通过定义一个枚举来组合我们的应用布局成为可能。

// 我们的所有路由将是这个Route枚举的一个变体
#[derive(Routable, PartialEq, Clone)]
enum Route {
    // 如果当前路径是"/home"，则渲染Home组件
    #[route("/home")]
    Home {},
    // 如果当前路径是"/blog"，则渲染Blog组件
    #[route("/blog")]
    Blog {},
}

fn Home() -> Element {
    todo!()
}

fn Blog() -> Element {
    todo!()
}

每当我们访问这个应用时，将根据我们输入的路由渲染Home组件或Blog组件。如果这两个路由都不匹配当前路径，则不会渲染任何内容。

我们可以通过以下两种方式解决这个问题：

• 一个后备404页面

// 我们的所有路由将是这个Route枚举的一个变体
#[derive(Routable, PartialEq, Clone)]
enum Route {
    #[route("/home")]
    Home {},
    #[route("/blog")]
    Blog {},
    // 如果当前路径不匹配上述任何路由，则渲染NotFound组件
    #[route("/:..segments")]
    NotFound { segments: Vec<String> },
}

fn Home() -> Element {
    todo!()
}

fn Blog() -> Element {
    todo!()
}

#[component]
fn NotFound(segments: Vec<String>) -> Element {
    todo!()
}

• 将404重定向到首页

// 我们的所有路由将是这个Route枚举的一个变体
#[derive(Routable, PartialEq, Clone)]
enum Route {
    #[route("/home")]
    // 如果当前路径不匹配其他路由，则重定向到"/home"
    #[redirect("/:..segments", |segments: Vec<String>| Route::Home {})]
    Home {},
    #[route("/blog")]
    Blog {},
}

链接

为了让我们的应用程序导航这些路由，我们可以提供称为链接（Links）的可点击元素。这些元素简单地包装了<a>元素，当点击时，会将应用程序导航到给定的位置。由于我们的路由是有效路由的枚举，如果你尝试链接到一个不存在的页面，将会收到编译错误。

rsx! {
    Link { to: Route::Home {}, "Go home!" }
}

更多阅读

本页面只是路由器的简要概述。有关更多信息，请查看路由器书籍或一些路由器示例。