How to use context to transfer between different routers?

[RyanTsi]

I created a app state in root, and I want to use it in other router. However it has a error about finding None value, which I think is related to my context passing. I'm tired of browsing the relevant documents, so I posted this issue to seek help. The following is my relevant code.

// main.rs
#[component]
fn App() -> Element {
    let mut state = use_signal(|| AppState::new());
    use_future(move || async move {
        state.write().load_articles().await;
    });
    provide_context(state);
    rsx! {
        document::Link { rel: "icon", href: FAVICON }
        document::Link { rel: "stylesheet", href: TAILWIND_CSS }
        div {
            div {
                Router::<Route> {}
            }
        }
    }
}

// router.rs
#[derive(Debug, Clone, Routable, PartialEq)]
#[rustfmt::skip]
pub enum Route {
    #[layout(Navbar)]
    #[route("/")]
    Home {},
    #[route("/blog")]
    Blog {},
    #[route("/about")]
    About {},
}

// blog.rs
#[component]
pub fn Blog() -> Element {
    let state = use_context::<Signal<AppState>>(); // This seems to be empty
    ...
}