Add yew-router.

Cargo.toml

@@ -19,6 +19,7 @@ log = "0.4.14"
 rand = "0.8.4"
 wasm-logger = "0.2.0"
 yew = "0.18.0"
+yew-router = "0.15.0"
 
 [dependencies.getrandom]
 version = "0.2.3"

source/main.rs

@@ -4,11 +4,21 @@
 //! # [bauke.xyz](https://bauke.xyz)
 
 use yew::prelude::*;
+use yew_router::router::Router;
 
 /// Components collection.
 pub(crate) mod components;
+/// Routes collection.
+pub(crate) mod routes;
 
-use components::{PageFooter, PageHeader, PageMain};
+/// All routes.
+#[derive(Clone, yew_router::Switch)]
+pub(crate) enum Route {
+  #[to = "/{}"]
+  NotFound(String),
+  #[to = "/"]
+  Home,
+}
 
 /// The main component.
 pub(crate) struct Model;
@@ -31,11 +41,20 @@ impl Component for Model {
 
   fn view(&self) -> Html {
     html! {
-      <>
+      <Router<Route, ()>
-        <PageHeader />
+        render = Router::render(|route: Route| {
-        <PageMain />
+          match route {
-        <PageFooter />
+            Route::NotFound(_) => html! {
-      </>
+              <main class="error-404">
+                <p>{"🤷"}</p>
+              </main>
+            },
+            Route::Home => html! {
+              <routes::HomeRoute />
+            }
+          }
+        })
+      />
     }
   }
 }

source/routes/home.rs

@@ -0,0 +1,35 @@
+use yew::prelude::*;
+
+use crate::components::{PageFooter, PageHeader, PageMain};
+
+/// The route for `/`.
+pub(crate) struct HomeRoute;
+
+impl Component for HomeRoute {
+  type Message = ();
+  type Properties = ();
+
+  fn create(_props: Self::Properties, _link: ComponentLink<Self>) -> Self {
+    log::trace!("Creating HomeRoute");
+
+    Self
+  }
+
+  fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+    unimplemented!()
+  }
+
+  fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+    false
+  }
+
+  fn view(&self) -> Html {
+    html! {
+      <>
+        <PageHeader />
+        <PageMain />
+        <PageFooter />
+      </>
+    }
+  }
+}

source/routes/mod.rs

@@ -0,0 +1,4 @@
+/// The route for `/`.
+mod home;
+
+pub(crate) use home::HomeRoute;

source/scss/components/_errors.scss

@@ -0,0 +1,8 @@
+.error-404 {
+  @include responsive-container;
+  align-items: center;
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+  padding: 1rem;
+}

source/scss/index.scss

@@ -25,6 +25,7 @@ button {
   font-family: monospace;
 }
 
+@import 'components/errors';
 @import 'components/page-footer';
 @import 'components/page-header';
 @import 'components/page-main';