[Yew-router]use_navigator() is None

Question

I'm a beginner. I tried to using yew-router with confirming the below tutorial. https://yew.rs/docs/next/concepts/router

but, it's not working. I'm getting the below error message.

panicked at 'called Option::unwrap() on a None value', src/main.rs:17:37

A part of my code is below. yew's version is 0.20, and yew-router's version is 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();
   ..
}

I know that Navigator is None, but I don't know why is that and how to solve it.

Answer 1

As below, this issue is resolved after adding tag in parent component.(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();
}

The top page is shown below.(home_page.rs)

In this example, when you click sample, you see sample page.

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}
      </>
    }
}