finish router refrence

docs/router/examples/catch_all_segments.rs

@@ -0,0 +1,24 @@
+#![allow(non_snake_case, unused)]
+use dioxus::prelude::*;
+use dioxus_router::prelude::*;
+
+// ANCHOR: route
+#[derive(Routable, Clone)]
+#[rustfmt::skip]
+enum Route {
+    // segments that start with :... are catch all segments
+    #[route("/blog/:...segments")]
+    BlogPost {
+        // You must include catch all segment in child variants
+        segments: Vec<String>,
+    },
+}
+
+// Components must contain the same catch all segments as their corresponding variant
+#[inline_props]
+fn BlogPost(cx: Scope, segments: Vec<String>) -> Element {
+    todo!()
+}
+// ANCHOR_END: route
+
+fn main() {}

docs/router/examples/dynamic_segments.rs

@@ -0,0 +1,35 @@
+#![allow(non_snake_case, unused)]
+use dioxus::prelude::*;
+use dioxus_router::prelude::*;
+
+// ANCHOR: route
+#[derive(Routable, Clone)]
+#[rustfmt::skip]
+enum Route {
+    // segments that start with : are dynamic segments
+    #[route("/blog/:name")]
+    BlogPost {
+        // You must include dynamic segments in child variants
+        name: String,
+    },
+    #[route("/document/:id")]
+    Document {
+        // You can use any type that implements FromStr
+        // If the segment can't be parsed, the route will not match
+        id: usize,
+    },
+}
+
+// Components must contain the same dynamic segments as their corresponding variant
+#[inline_props]
+fn BlogPost(cx: Scope, name: String) -> Element {
+    todo!()
+}
+
+#[inline_props]
+fn Document(cx: Scope, id: usize) -> Element {
+    todo!()
+}
+// ANCHOR_END: route
+
+fn main() {}

docs/router/examples/first_route.rs

@@ -9,6 +9,7 @@ enum Route {
     // The home page is at the / route
     #[route("/")]
     // If the name of the component and variant are the same you can omit the component and props name
+    // If they are different you can specify them like this:
     // #[route("/", ComponentName, PropsName)]
     Home {},
 }

docs/router/examples/history_buttons.rs

@@ -0,0 +1,30 @@
+#![allow(non_snake_case, unused)]
+use dioxus::prelude::*;
+use dioxus_router::prelude::*;
+
+#[derive(Routable, Clone)]
+#[rustfmt::skip]
+enum Route {
+    #[route("/")]
+    Home {},
+}
+
+#[inline_props]
+fn Home(cx: Scope) -> Element {
+    todo!()
+}
+
+// ANCHOR: history_buttons
+fn HistoryNavigation(cx: Scope) -> Element {
+    render! {
+        GoBackButton {
+            "Back to the Past"
+        }
+        GoForwardButton {
+            "Back to the Future" /* You see what I did there? 😉 */
+        }
+    }
+}
+// ANCHOR_END: history_buttons
+
+fn main() {}

docs/router/examples/history_provider.rs

@@ -0,0 +1,29 @@
+#![allow(non_snake_case)]
+use dioxus::prelude::*;
+use dioxus_router::prelude::*;
+
+#[derive(Routable, Clone)]
+enum Route {
+    #[route("/")]
+    Home {},
+}
+
+// ANCHOR: app
+#[inline_props]
+fn App(cx: Scope) -> Element {
+    render! {
+        Router {
+            config: || RouterConfig::default().history(WebHistory::default())
+        }
+    }
+}
+// ANCHOR_END: app
+
+#[inline_props]
+fn Home(cx: Scope) -> Element {
+    render! {
+        h1 { "Welcome to the Dioxus Blog!" }
+    }
+}
+
+fn main() {}

docs/router/examples/navigator.rs

@@ -0,0 +1,56 @@
+#![allow(non_snake_case)]
+use dioxus::prelude::*;
+use dioxus_router::prelude::*;
+
+#[derive(Routable, Clone)]
+#[rustfmt::skip]
+enum Route {
+    #[route("/")]
+    Home {},
+    #[route("/:...route")]
+    PageNotFound { route: Vec<String> },
+}
+
+#[inline_props]
+fn App(cx: Scope) -> Element {
+    render! {
+        Router {}
+    }
+}
+
+// ANCHOR: nav
+#[inline_props]
+fn Home(cx: Scope) -> Element {
+    let nav = use_navigator(cx);
+
+    // push
+    nav.push(Route::PageNotFound { route: vec![] });
+
+    // replace
+    nav.replace(Route::Home {});
+
+    // go back
+    nav.go_back();
+
+    // go forward
+    nav.go_forward();
+
+    render! {
+        h1 { "Welcome to the Dioxus Blog!" }
+    }
+}
+// ANCHOR_END: nav
+
+#[inline_props]
+fn PageNotFound(cx: Scope, route: Vec<String>) -> Element {
+    render! {
+        h1 { "Page not found" }
+        p { "We are terribly sorry, but the page you requested doesn't exist." }
+        pre {
+            color: "red",
+            "log:\nattemped to navigate to: {route:?}"
+        }
+    }
+}
+
+fn main() {}

docs/router/examples/nest.rs

@@ -0,0 +1,40 @@
+#![allow(non_snake_case, unused)]
+use dioxus::prelude::*;
+use dioxus_router::prelude::*;
+
+// ANCHOR: route
+#[derive(Routable, Clone)]
+// Skipping formatting allows you to indent nests
+#[rustfmt::skip]
+enum Route {
+    // Start the /blog nest
+    #[nest("/blog")]
+        // You can nest as many times as you want
+        #[nest("/:id")]
+            #[route("/post")]
+            PostId {
+                // You must include parent dynamic segments in child variants
+                id: usize,
+            },
+        // End nests manually with #[end_nest]
+        #[end_nest]
+        #[route("/:id")]
+        // The absolute route of BlogPost is /blog/:name
+        BlogPost {
+            id: usize,
+        },
+    // Or nests are ended automatically at the end of the enum
+}
+
+#[inline_props]
+fn BlogPost(cx: Scope, id: usize) -> Element {
+    todo!()
+}
+
+#[inline_props]
+fn PostId(cx: Scope, id: usize) -> Element {
+    todo!()
+}
+// ANCHOR_END: route
+
+fn main() {}

docs/router/examples/outlet.rs

@@ -0,0 +1,46 @@
+#![allow(non_snake_case)]
+use dioxus::prelude::*;
+use dioxus_router::prelude::*;
+
+// ANCHOR: outlet
+#[derive(Routable, Clone)]
+#[rustfmt::skip]
+enum Route {
+    #[layout(Wrapper)]
+        #[route("/")]
+        Index {},
+}
+
+#[inline_props]
+fn Wrapper(cx: Scope) -> Element {
+    render! {
+        header { "header" }
+        // The index route will be rendered here
+        Outlet { }
+        footer { "footer" }
+    }
+}
+
+#[inline_props]
+fn Index(cx: Scope) -> Element {
+    render! {
+        h1 { "Index" }
+    }
+}
+// ANCHOR_END: outlet
+
+fn App(cx: Scope) -> Element {
+    render! {
+        Router {}
+    }
+}
+
+fn main() {
+    let mut vdom = VirtualDom::new(App);
+    let _ = vdom.rebuild();
+    let html = dioxus_ssr::render(&vdom);
+    assert_eq!(
+        html,
+        "<header>header</header><h1>Index</h1><footer>footer</footer>"
+    );
+}

docs/router/examples/query_segments.rs

@@ -0,0 +1,24 @@
+#![allow(non_snake_case, unused)]
+use dioxus::prelude::*;
+use dioxus_router::prelude::*;
+
+// ANCHOR: route
+#[derive(Routable, Clone)]
+#[rustfmt::skip]
+enum Route {
+    // segments that start with ?: are query segments
+    #[route("/blog?:name")]
+    BlogPost {
+        // You must include query segments in child variants
+        name: String,
+    },
+}
+
+// Components must contain the same query segments as their corresponding variant
+#[inline_props]
+fn BlogPost(cx: Scope, name: String) -> Element {
+    todo!()
+}
+// ANCHOR_END: route
+
+fn main() {}

docs/router/examples/router_cfg.rs

@@ -0,0 +1,37 @@
+// ANCHOR: router
+#![allow(non_snake_case)]
+use dioxus::prelude::*;
+use dioxus_router::prelude::*;
+
+/// An enum of all of the possible routes in the app.
+#[derive(Routable, Clone)]
+enum Route {
+    // The home page is at the / route
+    #[route("/")]
+    // If the name of the component and variant are the same you can omit the component and props name
+    // #[route("/", ComponentName, PropsName)]
+    Home {},
+}
+// ANCHOR_END: router
+
+// ANCHOR: app
+#[inline_props]
+fn App(cx: Scope) -> Element {
+    render! {
+        Router {
+            config: || RouterConfig::default().history(WebHistory::default())
+        }
+    }
+}
+// ANCHOR_END: app
+
+// ANCHOR: home
+#[inline_props]
+fn Home(cx: Scope) -> Element {
+    render! {
+        h1 { "Welcome to the Dioxus Blog!" }
+    }
+}
+// ANCHOR_END: home
+
+fn main() {}

docs/router/examples/routing_update.rs

@@ -0,0 +1,41 @@
+#![allow(non_snake_case, unused)]
+use dioxus::prelude::*;
+use dioxus_router::prelude::*;
+
+// ANCHOR: router
+#[derive(Routable, Clone, PartialEq)]
+enum Route {
+    #[route("/")]
+    Index {},
+    #[route("/home")]
+    Home {},
+}
+
+#[inline_props]
+fn Home(cx: Scope) -> Element {
+    render! {
+        p { "Home" }
+    }
+}
+
+#[inline_props]
+fn Index(cx: Scope) -> Element {
+    render! {
+        p { "Index" }
+    }
+}
+
+fn app(cx: Scope) -> Element {
+    render! {
+        Router {
+            config: || RouterConfig::default().on_update(|state|{
+                (state.current() == Route::Index {}).then(|| {
+                    NavigationTarget::Internal(Route::Home {})
+                })
+            })
+        }
+    }
+}
+// ANCHOR_END: router
+
+fn main() {}

docs/router/examples/static_segments.rs

@@ -0,0 +1,29 @@
+#![allow(non_snake_case)]
+use dioxus::prelude::*;
+use dioxus_router::prelude::*;
+
+// ANCHOR: route
+#[derive(Routable, Clone)]
+#[rustfmt::skip]
+enum Route {
+    // Routes always start with a slash
+    #[route("/")]
+    Home {},
+    // You can have multiple segments in a route
+    #[route("/hello/world")]
+    HelloWorld {},
+}
+
+#[inline_props]
+fn Home(cx: Scope) -> Element {
+    todo!()
+}
+
+#[inline_props]
+fn HelloWorld(cx: Scope) -> Element {
+    todo!()
+}
+// ANCHOR_END: route
+
+
+fn main() {}