Yew-router中use_navigator()返回None触发Panic，求解决方案

问题原因 #

use_navigator()必须在被Router组件包裹的子组件中调用，而你的App组件是直接渲染Router的根组件，它本身不在Router提供的上下文范围内，所以调用use_navigator()会返回None，unwrap()直接触发了Panic。

解决步骤 #

1. 拆分组件，迁移业务逻辑 #

把原来App组件里的业务内容拆分到一个子组件（比如Home），让App组件只负责路由的配置与渲染。

2. 正确配置Router上下文 #

修改App组件，让它渲染Router并关联路由与对应子组件。此时子组件处于Router上下文覆盖范围内，就能正常获取Navigator实例。

修改后的完整代码示例：

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

#[derive(Debug, Clone, PartialEq, Routable)]
enum Route {
    #[at("/")]
    Home,
    // 其他路由定义...
}

// 子组件：处于Router上下文内，可正常获取Navigator
#[function_component(Home)]
fn home() -> Html {
    // 用if let替代unwrap，避免Panic风险
    if let Some(navigator) = use_navigator() {
        // 在这里使用navigator，比如navigator.push(&Route::OtherPage);
        html! { <div>{ "Home Page - Navigator 已就绪" }</div> }
    } else {
        html! { <div>{ "Navigator 不可用" }</div> }
    }
}

// 根组件：仅负责渲染Router
#[function_component(App)]
fn app() -> Html {
    html! {
        <Router<Route> render={Router::render(|route| {
            match route {
                Route::Home => html! { <Home /> },
                // 处理其他路由分支...
            }
        })} />
    }
}

额外建议 #

• 永远不要用unwrap()处理use_navigator()的返回值，改用if let或match做安全判断——即使上下文配置正确，极端场景下仍可能返回None。
• 所有需要使用Navigator的组件，必须处于Router的子层级中，不要在直接渲染Router的组件里调用use_navigator()。

内容的提问来源于stack exchange，提问作者croron