impl ComponentFunction for Routes

examples/flat_router.rs

@@ -5,17 +5,15 @@ use dioxus_router::prelude::*;
 fn main() {
     env_logger::init();
 
-    LaunchBuilder::new(|| {
+    LaunchBuilder::new(Route::Home {})
-        render! { Router::<Route> {} }
+        .cfg(
-    })
+            Config::new().with_window(
-    .cfg(
+                WindowBuilder::new()
-        Config::new().with_window(
+                    .with_inner_size(LogicalSize::new(600, 1000))
-            WindowBuilder::new()
+                    .with_resizable(false),
-                .with_inner_size(LogicalSize::new(600, 1000))
+            ),
-                .with_resizable(false),
+        )
-        ),
+        .launch()
-    )
-    .launch()
 }
 
 #[derive(Routable, Clone)]

examples/link.rs

@@ -9,21 +9,17 @@ fn main() {
 fn App() -> Element {
     rsx! (
         div {
-            p {
+            p { a { href: "http://dioxuslabs.com/", "Default link - links outside of your app" } }
-                a { href: "http://dioxuslabs.com/", "Default link - links outside of your app" }
-            }
             p {
                 a {
                     href: "http://dioxuslabs.com/",
                     prevent_default: "onclick",
                     onclick: |_| println!("Hello Dioxus"),
-                    "Custom event link - links inside of your app",
+                    "Custom event link - links inside of your app"
                 }
             }
         }
-        div {
+        div { Router::<Route> {} }
-            Router::<Route> {}
-        }
     )
 }
 
@@ -42,8 +38,12 @@ fn Header() -> Element {
     render! {
         h1 { "Your app here" }
         ul {
-            li { Link { to: Route::Home {}, "home" } }
+            li {
-            li { Link { to: Route::Settings {}, "settings" } }
+                Link { to: Route::Home {}, "home" }
+            }
+            li {
+                Link { to: Route::Settings {}, "settings" }
+            }
         }
         Outlet::<Route> {}
     }
@@ -51,10 +51,10 @@ fn Header() -> Element {
 
 #[component]
 fn Home() -> Element {
-    render!(h1 { "Home" })
+    render!( h1 { "Home" } )
 }
 
 #[component]
 fn Settings() -> Element {
-    render!(h1 { "Settings" })
+    render!( h1 { "Settings" } )
 }

examples/router.rs

@@ -2,10 +2,7 @@ use dioxus::prelude::*;
 use dioxus_router::prelude::*;
 
 fn main() {
-    #[cfg(target_arch = "wasm32")]
+    launch(Route::Home {});
-    dioxus_web::launch(App);
-    #[cfg(not(target_arch = "wasm32"))]
-    launch(App);
 }
 
 // ANCHOR: router
@@ -35,20 +32,17 @@ enum Route {
 }
 // ANCHOR_END: router
 
-#[component]
-fn App() -> Element {
-    render! {
-        Router::<Route> {}
-    }
-}
-
 #[component]
 fn NavBar() -> Element {
     render! {
         nav {
             ul {
-                li { Link { to: Route::Home {}, "Home" } }
+                li {
-                li { Link { to: Route::BlogList {}, "Blog" } }
+                    Link { to: Route::Home {}, "Home" }
+                }
+                li {
+                    Link { to: Route::BlogList {}, "Blog" }
+                }
             }
         }
         Outlet::<Route> {}
@@ -57,9 +51,7 @@ fn NavBar() -> Element {
 
 #[component]
 fn Home() -> Element {
-    render! {
+    render! { h1 { "Welcome to the Dioxus Blog!" } }
-        h1 { "Welcome to the Dioxus Blog!" }
-    }
 }
 
 #[component]
@@ -77,13 +69,17 @@ fn BlogList() -> Element {
         ul {
             li {
                 Link {
-                    to: Route::BlogPost { name: "Blog post 1".into() },
+                    to: Route::BlogPost {
+                        name: "Blog post 1".into(),
+                    },
                     "Read the first blog post"
                 }
             }
             li {
                 Link {
-                    to: Route::BlogPost { name: "Blog post 2".into() },
+                    to: Route::BlogPost {
+                        name: "Blog post 2".into(),
+                    },
                     "Read the second blog post"
                 }
             }
@@ -93,9 +89,7 @@ fn BlogList() -> Element {
 
 #[component]
 fn BlogPost(name: String) -> Element {
-    render! {
+    render! { h2 { "Blog Post: {name}" } }
-        h2 { "Blog Post: {name}"}
-    }
 }
 
 #[component]
@@ -103,9 +97,6 @@ fn PageNotFound(route: Vec<String>) -> Element {
     render! {
         h1 { "Page not found" }
         p { "We are terribly sorry, but the page you requested doesn't exist." }
-        pre {
+        pre { color: "red", "log:\nattemped to navigate to: {route:?}" }
-            color: "red",
-            "log:\nattemped to navigate to: {route:?}"
-        }
     }
 }

examples/simple_desktop.rs

@@ -9,14 +9,7 @@ fn main() {
         .with_module_level("dioxus", log::LevelFilter::Trace)
         .init()
         .unwrap();
-    launch(App);
+    launch(Route::Home {});
-}
-
-#[component]
-fn App() -> Element {
-    render! {
-        Router::<Route> {}
-    }
 }
 
 #[derive(Routable, Clone)]
@@ -42,11 +35,36 @@ fn NavBar() -> Element {
     render! {
         h1 { "Your app here" }
         ul {
-            li { Link { to: Route::Home {}, "home" } }
+            li {
-            li { Link { to: Route::BlogList {}, "blog" } }
+                Link { to: Route::Home {}, "home" }
-            li { Link { to: Route::BlogPost { post: "tim".into() }, "tims' blog" } }
+            }
-            li { Link { to: Route::BlogPost { post: "bill".into() }, "bills' blog" } }
+            li {
-            li { Link { to: Route::BlogPost { post: "james".into() }, "james amazing' blog" } }
+                Link { to: Route::BlogList {}, "blog" }
+            }
+            li {
+                Link {
+                    to: Route::BlogPost {
+                        post: "tim".into(),
+                    },
+                    "tims' blog"
+                }
+            }
+            li {
+                Link {
+                    to: Route::BlogPost {
+                        post: "bill".into(),
+                    },
+                    "bills' blog"
+                }
+            }
+            li {
+                Link {
+                    to: Route::BlogPost {
+                        post: "james".into(),
+                    },
+                    "james amazing' blog"
+                }
+            }
         }
         Outlet::<Route> {}
     }
@@ -70,7 +88,7 @@ fn BlogPost(post: String) -> Element {
 
     render! {
         div {
-            h3 { "blog post: {post}"  }
+            h3 { "blog post: {post}" }
             Link { to: Route::BlogList {}, "back to blog list" }
         }
     }

examples/simple_router.rs

@@ -29,14 +29,32 @@ fn Blog(id: String) -> Element {
 fn Nav() -> Element {
     render! {
         nav {
-            li { Link { to: Route::Homepage { }, "Go home" } }
+            li {
-            li { Link { to: Route::Blog { id: "Brownies".to_string() }, "Learn Brownies" } }
+                Link { to: Route::Homepage {}, "Go home" }
-            li { Link { to: Route::Blog { id: "Cookies".to_string() }, "Learn Cookies"  } }
+            }
+            li {
+                Link {
+                    to: Route::Blog {
+                        id: "Brownies".to_string(),
+                    },
+                    "Learn Brownies"
+                }
+            }
+            li {
+                Link {
+                    to: Route::Blog {
+                        id: "Cookies".to_string(),
+                    },
+                    "Learn Cookies"
+                }
+            }
         }
         div { Outlet::<Route> {} }
     }
 }
 
 fn main() {
-    launch(|| render!(Router::<Route> {}));
+    launch(Route::Blog {
+        id: "hello".to_string(),
+    });
 }

packages/router-macro/src/lib.rs

@@ -213,6 +213,7 @@ pub fn routable(input: TokenStream) -> TokenStream {
     let parse_impl = route_enum.parse_impl();
     let display_impl = route_enum.impl_display();
     let routable_impl = route_enum.routable_impl();
+    let component_impl = route_enum.component_impl();
 
     (quote! {
         #error_type
@@ -221,6 +222,8 @@ pub fn routable(input: TokenStream) -> TokenStream {
 
         #routable_impl
 
+        #component_impl
+
         #parse_impl
     })
     .into()
@@ -599,6 +602,25 @@ impl RouteEnum {
             }
         }
     }
+
+    fn component_impl(&self) -> TokenStream2 {
+        let name = &self.name;
+
+        quote! {
+            impl dioxus_core::ComponentFunction<#name> for #name {
+                type Props = ::std::rc::Rc<::std::cell::Cell<::dioxus_router::prelude::RouterConfig<#name>>>;
+
+                fn call(&self, props: Self::Props) -> dioxus_core::Element {
+                    let initial_route = self.clone();
+                    render! {
+                        ::dioxus_router::prelude::Router::<#name> {
+                            config: move || props.take().initial_route(initial_route)
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 
 struct SiteMapSegment {

packages/router/examples/simple_routes.rs

@@ -28,7 +28,7 @@ async fn main() {
             get(move |ws: WebSocketUpgrade| async move {
                 ws.on_upgrade(move |socket| async move {
                     _ = view
-                        .launch(dioxus_liveview::axum_socket(socket), Root)
+                        .launch(dioxus_liveview::axum_socket(socket), Route::Home {})
                         .await;
                 })
             }),
@@ -44,23 +44,7 @@ async fn main() {
 
 #[cfg(not(feature = "liveview"))]
 fn main() {
-    #[cfg(not(target_arch = "wasm32"))]
+    launch(Route::Home {})
-    dioxus_desktop::launch(Root);
-
-    #[cfg(target_arch = "wasm32")]
-    dioxus_web::launch(root);
-}
-
-#[cfg(feature = "liveview")]
-#[component]
-fn Root() -> Element {
-    render! { Router::<Route> {} }
-}
-
-#[cfg(not(feature = "liveview"))]
-#[component]
-fn Root() -> Element {
-    render! { Router::<Route> {} }
 }
 
 #[component]

packages/router/src/components/router.rs

@@ -1,13 +1,14 @@
 use dioxus_lib::prelude::*;
 
-use std::{cell::RefCell, str::FromStr};
+use std::{cell::RefCell, rc::Rc, str::FromStr};
 
 use crate::{prelude::Outlet, routable::Routable, router_cfg::RouterConfig};
 
 /// The config for [`Router`].
+#[derive(Clone)]
 pub struct RouterConfigFactory<R: Routable> {
     #[allow(clippy::type_complexity)]
-    config: RefCell<Option<Box<dyn FnOnce() -> RouterConfig<R>>>>,
+    config: Rc<RefCell<Option<Box<dyn FnOnce() -> RouterConfig<R>>>>>,
 }
 
 #[cfg(feature = "serde")]
@@ -34,7 +35,7 @@ where
 impl<R: Routable, F: FnOnce() -> RouterConfig<R> + 'static> From<F> for RouterConfigFactory<R> {
     fn from(value: F) -> Self {
         Self {
-            config: RefCell::new(Some(Box::new(value))),
+            config: Rc::new(RefCell::new(Some(Box::new(value)))),
         }
     }
 }
@@ -67,7 +68,9 @@ where
     <T as FromStr>::Err: std::fmt::Display,
 {
     fn clone(&self) -> Self {
-        todo!()
+        Self {
+            config: self.config.clone(),
+        }
     }
 }
 
@@ -127,21 +130,21 @@ where
 {
     use crate::prelude::{outlet::OutletContext, RouterContext};
 
-    todo!();
+    use_hook(|| {
-    // use_context_provider(|| {
+        provide_context(RouterContext::new(
-    //     RouterContext::new(
+            (props
-    //         (props
+                .config
-    //             .config
+                .config
-    //             .config
+                .take()
-    //             .take()
+                .expect("use_context_provider ran twice"))(),
-    //             .expect("use_context_provider ran twice"))(),
+            schedule_update_any(),
-    //         schedule_update_any(),
+        ));
-    //     )
+
-    // });
+        provide_context(OutletContext::<R> {
-    // use_context_provider(|| OutletContext::<R> {
+            current_level: 0,
-    //     current_level: 0,
+            _marker: std::marker::PhantomData,
-    //     _marker: std::marker::PhantomData,
+        });
-    // });
+    });
 
     render! { Outlet::<R> {} }
 }

packages/router/src/router_cfg.rs

@@ -28,6 +28,7 @@ pub struct RouterConfig<R: Routable> {
     pub(crate) failure_external_navigation: fn() -> Element,
     pub(crate) history: Option<Box<dyn AnyHistoryProvider>>,
     pub(crate) on_update: Option<RoutingCallback<R>>,
+    pub(crate) initial_route: Option<R>,
 }
 
 #[cfg(feature = "serde")]
@@ -77,6 +78,7 @@ where
             failure_external_navigation: FailureExternalNavigation,
             history: None,
             on_update: None,
+            initial_route: None,
         }
     }
 }
@@ -88,18 +90,22 @@ where
 {
     pub(crate) fn take_history(&mut self) -> Box<dyn AnyHistoryProvider> {
         self.history.take().unwrap_or_else(|| {
+            #[allow(unused)]
+            let initial_route = self.initial_route.clone().unwrap_or("/".parse().unwrap_or_else(|err|
+                panic!("index route does not exist:\n{}\n use MemoryHistory::with_initial_path or RouterConfig::initial_route to set a custom path", err)
+            ));
             // If we are on wasm32 and the web feature is enabled, use the web history.
             #[cfg(all(target_arch = "wasm32", feature = "web"))]
-            let history = Box::<AnyHistoryProviderImplWrapper<R, WebHistory<R>>>::default();
+            let history = Box::<AnyHistoryProviderImplWrapper::<WebHistory::<R>>>::default();
             // If we are not on wasm32 and the liveview feature is enabled, use the liveview history.
             #[cfg(all(feature = "liveview", not(target_arch = "wasm32")))]
-            let history = Box::<AnyHistoryProviderImplWrapper<R, LiveviewHistory<R>>>::default();
+            let history = Box::new(AnyHistoryProviderImplWrapper::new(LiveviewHistory::new(initial_route)));
             // If neither of the above are true, use the memory history.
             #[cfg(all(
                 not(all(target_arch = "wasm32", feature = "web")),
                 not(all(feature = "liveview", not(target_arch = "wasm32"))),
             ))]
-            let history = Box::<AnyHistoryProviderImplWrapper<R, MemoryHistory<R>>>::default();
+            let history = Box::new(AnyHistoryProviderImplWrapper::new(MemoryHistory::with_initial_path(initial_route)));
             history
         })
     }
@@ -135,7 +141,7 @@ where
 
     /// The [`HistoryProvider`] the router should use.
     ///
-    /// Defaults to a default [`MemoryHistory`].
+    /// Defaults to a different history provider depending on the target platform.
     pub fn history(self, history: impl HistoryProvider<R> + 'static) -> Self {
         Self {
             history: Some(Box::new(AnyHistoryProviderImplWrapper::new(history))),
@@ -143,6 +149,14 @@ where
         }
     }
 
+    /// The initial route the router should use if no history provider is set.
+    pub fn initial_route(self, route: R) -> Self {
+        Self {
+            initial_route: Some(route),
+            ..self
+        }
+    }
+
     /// A component to render when an external navigation fails.
     ///
     /// Defaults to a router-internal component called [`FailureExternalNavigation`]