dioxus_router/components/outlet.rs
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
use crate::prelude::{outlet::OutletContext, *};
use dioxus_lib::prelude::*;
/// 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 [`Outlet`]s 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
/// ```rust
/// # use dioxus::prelude::*;
/// # use dioxus_router::prelude::*;
/// #[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"
/// }
/// }
/// }
///
/// # #[component]
/// # fn App() -> Element {
/// # rsx! {
/// # dioxus_router::components::HistoryProvider {
/// # history: move |_| std::rc::Rc::new(dioxus_history::MemoryHistory::with_initial_path(Route::Child {}.to_string())) as std::rc::Rc<dyn dioxus_history::History>,
/// # Router::<Route> {}
/// # }
/// # }
/// # }
/// #
/// # let mut vdom = VirtualDom::new(App);
/// # vdom.rebuild_in_place();
/// # assert_eq!(dioxus_ssr::render(&vdom), "<h1>App</h1><p>Child</p>");
/// ```
pub fn Outlet<R: Routable + Clone>() -> Element {
OutletContext::<R>::render()
}