创建我们的第一个路由
在这一章节中，我们将开始使用 Dioxus 路由器，并为我们的项目添加一个首页和一个 404 页面。
基础
Dioxus 路由器的核心是 Routable 宏和 Router 组件。
Routable 是一个特性（trait），适用于任何可以：
- 从 URL 解析
- 转换为 URL
- 渲染为一个元素（Element）
我们来创建一个新的路由器。首先，我们需要一个实际的页面来路由！我们来添加一个首页组件：
#[component]
fn Home() -> Element {
rsx! { h1 { "欢迎来到 Dioxus 博客！" } }
}
创建路由
我们希望使用 Dioxus 路由器将我们的应用程序分割成不同的“页面”。然后，Dioxus 路由器将根据 URL 路径决定渲染哪个页面。
要开始使用 Dioxus 路由器，我们需要使用 Routable 宏。
Routable 宏接受一个枚举，其中包含我们应用程序中的所有可能路由。枚举的每个变体代表一个路由，并且必须用 #[route(path)] 属性进行注解。
#![allow(non_snake_case)]
use dioxus::prelude::*;
use dioxus_router::prelude::*;
/// 应用程序中所有可能路由的枚举。
#[derive(Routable, Clone)]
enum Route {
// 主页位于 / 路由
#[route("/")]
Home {},
}
Router 组件将为所有内部组件和钩子（hooks）提供路由器上下文。你通常会希望将它放置在你的组件树的顶部。
fn App() -> Element {
rsx! { Router::<Route> {} }
}
如果你现在转到应用程序的浏览器标签页，你应该在根 URL（http://localhost:8080/）上看到文本“欢迎来到 Dioxus 博客！”。如果你输入不同的 URL 路径，应该什么都不会显示。
这是因为我们告诉 Dioxus 路由器只有在 URL 路径是 / 时才渲染 Home 组件。
后备路由
在我们的示例中，当路由不存在时，Dioxus 路由器不会渲染任何内容。许多网站在路径不存在时也有一个“404”页面。我们来给我们的网站添加一个。
首先，我们创建一个新的 PageNotFound 组件。
#[component]
fn PageNotFound(route: Vec<String>) -> Element {
rsx! {
h1 { "页面未找到" }
p { "我们非常抱歉，但您请求的页面不存在。" }
pre { color: "red", "日志：\n尝试导航到：{route:?}" }
}
}
接下来，在 Route 枚举中注册路由，以匹配如果所有其他路由都失败的情况。
#[derive(Routable, Clone)]
enum Route {
#[route("/")]
Home {},
// PageNotFound 是一个捕获所有路由的路由，它将匹配任何路由并将匹配的段放在 route 字段中
#[route("/:..route")]
PageNotFound { route: Vec<String> },
}
现在，当你访问一个不存在的路由时，你应该能看到页面未找到的文本。
结论
在这一章节中，我们学习了如何创建一个路由并告诉 Dioxus 路由器当 URL 路径是 / 时渲染哪个组件。我们还创建了一个 404 页面来处理当路由不存在的情况。接下来，我们将创建我们网站的 blog 部分。我们将利用嵌套路由和 URL 参数。
