Function Outlet

Source
pub fn Outlet<R: Routable + Clone>() -> Element
Expand description

An outlet for the current content.

Only works as descendant of a Link component, otherwise it will be inactive.

The Outlet is aware of how many Outlets it is nested within. It will render the content of the active route that is exactly as deep.

§Panic

  • When the Outlet is not nested a Link component, but only in debug builds.

§Example

#[derive(Clone, Routable)]
#[rustfmt::skip]
enum Route {
    #[nest("/wrap")]
        #[layout(Wrapper)] // Every layout component must have one Outlet
            #[route("/")]
            Child {},
        #[end_layout]
    #[end_nest]
    #[route("/")]
    Index {},
}

#[component]
fn Index() -> Element {
    rsx! {
        div {
            "Index"
        }
    }
}

#[component]
fn Wrapper() -> Element {
    rsx! {
        h1 { "App" }
        Outlet::<Route> {} // The content of child routes will be rendered here
    }
}

#[component]
fn Child() -> Element {
    rsx! {
        p {
            "Child"
        }
    }
}