boilerplate

src/views/blog.rs

@@ -0,0 +1,30 @@
+use crate::Route;
+use dioxus::prelude::*;
+use crate::components::{Hero};
+
+const BLOG_CSS: Asset = asset!("/assets/styling/blog.css");
+
+#[component]
+pub fn Blog(id: i32) -> Element {
+    rsx! {
+        document::Link { rel: "stylesheet", href: BLOG_CSS }
+
+        div {
+            id: "blog",
+
+            h1 { "This is blog #{id}!" }
+            p { "In blog #{id}, we show how the Dioxus router works and how URL parameters can be passed as props to our route components." }
+
+            Link {
+                to: Route::Blog { id: id - 1 },
+                "Previous"
+            }
+            span { " <---> " }
+            Link {
+                to: Route::Blog { id: id + 1 },
+                "Next"
+            }
+        }
+        Hero{}
+    }
+}

src/views/home.rs

@@ -0,0 +1,11 @@
+use dioxus::prelude::*;
+use crate::components::{Hero, Echo};
+
+/// The Home page component that will be rendered when the current route is `[Route::Home]`
+#[component]
+pub fn Home() -> Element {
+    rsx! {
+        Hero {}
+        Echo {}
+    }
+}

src/views/mod.rs

@@ -0,0 +1,8 @@
+mod home;
+pub use home::Home;
+
+mod blog;
+pub use blog::Blog;
+
+mod navbar;
+pub use navbar::Navbar;

src/views/navbar.rs

@@ -0,0 +1,25 @@
+use crate::Route;
+use dioxus::prelude::*;
+
+const NAVBAR_CSS: Asset = asset!("/assets/styling/navbar.css");
+
+#[component]
+pub fn Navbar() -> Element {
+    rsx! {
+        document::Link { rel: "stylesheet", href: NAVBAR_CSS }
+
+        div {
+            id: "navbar",
+            Link {
+                to: Route::Home {},
+                "Home"
+            }
+            Link {
+                to: Route::Blog { id: 1 },
+                "Blog"
+            }
+        }
+
+        Outlet::<Route> {}
+    }
+}