fix(router): 修复错误冒泡触发的 404 页「返回首页」卡死
PostDetail 对不存在的 slug 抛出 ServerFnError(404) 后,ErrorLayout 的 ErrorBoundary 捕获错误并在 fallback 渲染 NotFound。此时 ErrorBoundary 持有错误, 根据 Dioxus 0.7.9 的渲染逻辑(有错则永远渲染 fallback,不渲染 children/Outlet), 点击 Link 切换路由虽更新了 URL,但页面仍停留在 fallback,表现为「URL 变了页面不变」。 根因:ErrorBoundary 捕获错误后不会自动恢复,必须显式调用 clear_errors() 才能 重新渲染 children。原实现用 Link 导航无法干预点击时机清除错误。 修复:NotFound 与 ErrorLayout 的通用错误 fallback 中,「返回首页」改用 button, onclick 内先 clear_errors() 清除错误边界,再 navigator().push 导航。 - NotFound 通过 try_consume_context::<ErrorContext>() 获取可能存在的错误边界: 路由匹配命中的 404 无错误(clear_errors 是 no-op),错误冒泡的 404 才需清除。 - ErrorLayout 的 handle_error 闭包参数本身就是 ErrorContext,clone 后在按钮内使用。
This commit is contained in:
parent
f9cf1f71e4
commit
5a10b07bff
@ -6,13 +6,24 @@
|
|||||||
//! 该页面为静态展示页面,不发起任何 server function 调用。
|
//! 该页面为静态展示页面,不发起任何 server function 调用。
|
||||||
|
|
||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
use dioxus::router::components::Link;
|
|
||||||
|
|
||||||
use crate::router::Route;
|
use crate::router::Route;
|
||||||
|
|
||||||
/// 404 页面组件,对应兜底路由 `/:..segments`。
|
/// 404 页面组件,对应兜底路由 `/:..segments`。
|
||||||
///
|
///
|
||||||
/// 展示大号的装饰性 404 数字、状态标签、错误说明以及返回首页的链接。
|
/// 展示大号的装饰性 404 数字、状态标签、错误说明以及返回首页的链接。
|
||||||
|
///
|
||||||
|
/// # 两种命中路径
|
||||||
|
/// 本组件在两种完全不同的机制下被渲染:
|
||||||
|
/// 1. **路由匹配** —— 访问任意未命中路径,Router 命中 catch-all `Route::NotFound`,
|
||||||
|
/// 此时 `ErrorBoundary` **无错误**,本组件作为 children(Outlet)正常渲染。
|
||||||
|
/// 2. **错误冒泡** —— 如 `PostDetail` 对不存在的 slug 抛出 `ServerFnError(404)`,
|
||||||
|
/// `ErrorLayout` 的 `ErrorBoundary` 捕获后在 fallback 里渲染本组件。
|
||||||
|
///
|
||||||
|
/// 「返回首页」必须在导航前清除可能存在的错误边界,否则场景 2 会卡死:
|
||||||
|
/// ErrorBoundary 持有错误时不渲染 children(Outlet),路由虽切到 `Home`,
|
||||||
|
/// 页面仍停留在 fallback(本组件),表现为「URL 变了但页面不变」。
|
||||||
|
/// 场景 1 下没有错误,`clear_errors` 是 no-op。
|
||||||
#[component]
|
#[component]
|
||||||
pub fn NotFound(segments: Vec<String>) -> Element {
|
pub fn NotFound(segments: Vec<String>) -> Element {
|
||||||
let _ = segments;
|
let _ = segments;
|
||||||
@ -51,10 +62,19 @@ pub fn NotFound(segments: Vec<String>) -> Element {
|
|||||||
"这个页面似乎走丢了,或者从未存在过。"
|
"这个页面似乎走丢了,或者从未存在过。"
|
||||||
}
|
}
|
||||||
|
|
||||||
// 返回首页
|
// 返回首页:用 onclick 先清除错误边界再导航。
|
||||||
Link {
|
// 直接用 Link 无法干预点击时机,故改为按钮 + 命令式导航。
|
||||||
to: Route::Home {},
|
// 详见组件顶部文档:场景 2(错误冒泡)下若不清除错误,
|
||||||
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",
|
// ErrorBoundary 会一直渲染 fallback,路由切换后页面仍卡在本页。
|
||||||
|
button {
|
||||||
|
r#type: "button",
|
||||||
|
onclick: move |_| {
|
||||||
|
if let Some(ctx) = try_consume_context::<ErrorContext>() {
|
||||||
|
ctx.clear_errors();
|
||||||
|
}
|
||||||
|
let _ = dioxus::router::navigator().push(Route::Home {});
|
||||||
|
},
|
||||||
|
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",
|
||||||
svg {
|
svg {
|
||||||
xmlns: "http://www.w3.org/2000/svg",
|
xmlns: "http://www.w3.org/2000/svg",
|
||||||
width: "16",
|
width: "16",
|
||||||
|
|||||||
@ -129,6 +129,11 @@ fn ErrorLayout() -> Element {
|
|||||||
rsx! {
|
rsx! {
|
||||||
ErrorBoundary {
|
ErrorBoundary {
|
||||||
handle_error: move |err: ErrorContext| {
|
handle_error: move |err: ErrorContext| {
|
||||||
|
// 克隆一份错误边界句柄,供 fallback 内的「返回首页」按钮清除错误。
|
||||||
|
// ErrorContext 内部是 Rc<RefCell<...>>,clone 廉价。
|
||||||
|
// 不清除就导航会卡死:ErrorBoundary 持有错误时永远渲染 fallback,
|
||||||
|
// 不渲染 children(Outlet),导致 URL 变了但页面不变。
|
||||||
|
let err_ctx = err.clone();
|
||||||
// Commit the status code on the server side
|
// Commit the status code on the server side
|
||||||
#[cfg(feature = "server")]
|
#[cfg(feature = "server")]
|
||||||
{
|
{
|
||||||
@ -202,9 +207,18 @@ fn ErrorLayout() -> Element {
|
|||||||
"抱歉,加载页面时出现了一些错误,请稍后再试。"
|
"抱歉,加载页面时出现了一些错误,请稍后再试。"
|
||||||
}
|
}
|
||||||
|
|
||||||
// CTA: Link back to home, styled with subtle border & background transition
|
// CTA: 清除错误边界后命令式导航回首页。
|
||||||
dioxus::router::components::Link {
|
// 必须用按钮而非 Link —— Link 无法在导航前清除错误,
|
||||||
to: Route::Home {},
|
// 会导致 ErrorBoundary 卡在 fallback,页面不随路由切换更新。
|
||||||
|
button {
|
||||||
|
r#type: "button",
|
||||||
|
onclick: {
|
||||||
|
let err_ctx = err_ctx.clone();
|
||||||
|
move |_| {
|
||||||
|
err_ctx.clear_errors();
|
||||||
|
let _ = dioxus::router::navigator().push(Route::Home {});
|
||||||
|
}
|
||||||
|
},
|
||||||
class: "group inline-flex items-center gap-2 px-6 py-2.5 text-sm font-medium text-paper-primary bg-paper-theme border border-paper-border rounded-full hover:border-paper-secondary hover:bg-paper-border transition-all duration-200 cursor-pointer shadow-sm active:scale-[0.98]",
|
class: "group inline-flex items-center gap-2 px-6 py-2.5 text-sm font-medium text-paper-primary bg-paper-theme border border-paper-border rounded-full hover:border-paper-secondary hover:bg-paper-border transition-all duration-200 cursor-pointer shadow-sm active:scale-[0.98]",
|
||||||
svg {
|
svg {
|
||||||
xmlns: "http://www.w3.org/2000/svg",
|
xmlns: "http://www.w3.org/2000/svg",
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user