[Yew-router]use_navigator() is None

Question

我是初学者。我尝试使用yew-router确认下面的教程。https://yew.rs/docs/next/concepts/router

但是，它不起作用。我得到下面的错误信息。

'callOption::unwrap()on aNonevalue'， src/main.rs:17:37

下面是我的一部分代码。Yew的版本是0.20，而Yew -router的版本是0.17。

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

#[derive(Debug, Clone, PartialEq, Routable)]
enum Route {
#[at("/")]
App,
..
}
#[function_component(App)]
fn app() -> Html {
let navigator = use_navigator().unwrap();
..
}

我知道Navigator是None，但是我不知道为什么会这样，也不知道如何解决它。

Answer 1

如下所示，在父组件中添加标签后，此问题得到解决。(main.rs)

use page::sample_page::SamplePage;
use page::home_page::Home;
use yew::prelude::*;
use yew_router::prelude::*;
mod page;
#[derive(Debug, Clone, PartialEq, Routable)]
pub enum Route {
#[at("/")]
Home,
#[at("/sample_page")]
SamplePage,
}
fn switch(routes: Route) -> Html {
match routes {
Route::Home => html! {
<Home />
},
Route::SamplePage => html! {
<SamplePage/>
},
}
}
#[function_component(App)]
fn app() -> Html {
html! {
<BrowserRouter>
<Switch<Route> render={switch} />
</BrowserRouter>
}
}
fn main() {
yew::Renderer::<App>::new().render();
}

首页如下:(home_page.rs)

在本例中，当您单击sample时，您将看到示例页面。

use yew::prelude::*;
use yew_router::prelude::*;
use crate::Route;
#[function_component(Home)]
pub fn home() -> Html {
let navigator = use_navigator().unwrap();
let go_sample_page_button = {
let navigator = navigator.clone();
let onclick = Callback::from(move |_| navigator.push(&Route::SamplePage));
html! {
<button type="button" onclick={onclick} >{ "sample" }</button>
}
};
html! {
<>
{go_sample_page_button}
</>
}
}