yggdrasil/pages/
not_found.rs

1//! 404 页面模块。
2//!
3//! 对应路由 `/:..segments`。
4//!
5//! 当用户访问未匹配任何前端路由的 URL 时，Dioxus Router 会回退到该 404 页面。
6//! 该页面为静态展示页面，不发起任何 server function 调用。
7
8use dioxus::prelude::*;
9
10use crate::router::Route;
11
12/// 404 页面组件，对应兜底路由 `/:..segments`。
13///
14/// 展示大号的装饰性 404 数字、状态标签、错误说明以及返回首页的链接。
15///
16/// # 两种命中路径
17/// 本组件在两种完全不同的机制下被渲染：
18/// 1. **路由匹配** —— 访问任意未命中路径，Router 命中 catch-all `Route::NotFound`，
19///    此时 `ErrorBoundary` **无错误**，本组件作为 children（Outlet）正常渲染。
20/// 2. **错误冒泡** —— 如 `PostDetail` 对不存在的 slug 抛出 `ServerFnError(404)`，
21///    `ErrorLayout` 的 `ErrorBoundary` 捕获后在 fallback 里渲染本组件。
22///
23/// 「返回首页」必须在导航前清除可能存在的错误边界，否则场景 2 会卡死：
24/// ErrorBoundary 持有错误时不渲染 children（Outlet），路由虽切到 `Home`，
25/// 页面仍停留在 fallback（本组件），表现为「URL 变了但页面不变」。
26/// 场景 1 下没有错误，`clear_errors` 是 no-op。
27#[component]
28pub fn NotFound(segments: Vec<String>) -> Element {
29    let _ = segments;
30
31    // Commit 404 status code during server-side rendering
32    #[cfg(feature = "server")]
33    {
34        dioxus::fullstack::FullstackContext::commit_http_status(
35            http::StatusCode::NOT_FOUND,
36            Some("Page Not Found".to_string()),
37        );
38    }
39
40    rsx! {
41        div { class: "flex flex-col items-center justify-center text-center min-h-[50vh] md:min-h-[55vh] px-6",
42            // 巨大的装饰性 404，作为视觉锚点
43            div { class: "relative mb-2",
44                span { class: "text-[140px] md:text-[180px] font-bold leading-none tracking-tighter text-paper-tertiary/[0.08] dark:text-paper-tertiary/[0.06] select-none",
45                    "404"
46                }
47            }
48
49            // 状态标签
50            span { class: "text-sm font-medium tracking-[0.2em] uppercase text-paper-secondary mb-6",
51                "Page Not Found"
52            }
53
54            // 分隔线
55            div { class: "w-12 h-px bg-paper-border mb-8" }
56
57            // 错误信息
58            h1 { class: "text-xl md:text-2xl font-medium text-paper-primary mb-3",
59                "页面未找到"
60            }
61            p { class: "text-sm md:text-base text-paper-secondary max-w-sm leading-relaxed mb-10",
62                "这个页面似乎走丢了，或者从未存在过。"
63            }
64
65            // 返回首页：用 onclick 先清除错误边界再导航。
66            // 直接用 Link 无法干预点击时机，故改为按钮 + 命令式导航。
67            // 详见组件顶部文档：场景 2（错误冒泡）下若不清除错误，
68            // ErrorBoundary 会一直渲染 fallback，路由切换后页面仍卡在本页。
69            button {
70                r#type: "button",
71                onclick: move |_| {
72                    if let Some(ctx) = try_consume_context::<ErrorContext>() {
73                        ctx.clear_errors();
74                    }
75                    let _ = dioxus::router::navigator().push(Route::Home {});
76                },
77                class: "group inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium text-paper-primary bg-paper-entry border border-paper-border rounded-lg hover:border-paper-secondary hover:bg-paper-border transition-all cursor-pointer",
78                svg {
79                    xmlns: "http://www.w3.org/2000/svg",
80                    width: "16",
81                    height: "16",
82                    view_box: "0 0 24 24",
83                    fill: "none",
84                    stroke: "currentColor",
85                    stroke_width: "2",
86                    stroke_linecap: "round",
87                    stroke_linejoin: "round",
88                    class: "transition-transform group-hover:-translate-x-0.5",
89                    path { d: "M19 12H5M12 19l-7-7 7-7" }
90                }
91                "返回首页"
92            }
93        }
94    }
95}
yggdrasil/pages/not_found.rs

yggdrasil/pages/
not_found.rs
