feat: implemented basic routing

Cargo.lock

@@ -116,6 +116,7 @@ name = "frontend"
 version = "0.1.0"
 dependencies = [
  "yew",
+ "yew-router",
 ]
 
 [[package]]
@@ -259,6 +260,7 @@ version = "0.2.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a8d5564e570a38b43d78bdc063374a0c3098c4f0d64005b12f9bbe87e869b6d7"
 dependencies = [
+ "futures-channel",
  "gloo-events",
  "js-sys",
  "wasm-bindgen",
@@ -333,6 +335,8 @@ version = "0.2.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9b995a66bb87bebce9a0f4a95aed01daca4872c050bfcb21653361c03bc35e5c"
 dependencies = [
+ "futures-channel",
+ "futures-core",
  "js-sys",
  "wasm-bindgen",
 ]
@@ -594,6 +598,12 @@ dependencies = [
  "proc-macro2",
 ]
 
+[[package]]
+name = "route-recognizer"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "afab94fb28594581f62d981211a9a4d53cc8130bbcbbb89a0440d9b8e81a7746"
+
 [[package]]
 name = "rustc-demangle"
 version = "0.1.23"
@@ -897,3 +907,32 @@ dependencies = [
  "quote",
  "syn 1.0.109",
 ]
+
+[[package]]
+name = "yew-router"
+version = "0.17.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "426ee0486d2572a6c5e39fbdbc48b58d59bb555f3326f54631025266cf04146e"
+dependencies = [
+ "gloo",
+ "js-sys",
+ "route-recognizer",
+ "serde",
+ "serde_urlencoded",
+ "tracing",
+ "wasm-bindgen",
+ "web-sys",
+ "yew",
+ "yew-router-macro",
+]
+
+[[package]]
+name = "yew-router-macro"
+version = "0.17.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "89b249cdb39e0cddaf0644dedc781854524374664793479fdc01e6a65d6e6ae3"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 1.0.109",
+]

Cargo.toml

@@ -7,3 +7,4 @@ edition = "2021"
 
 [dependencies]
 yew = { version = "0.20.0", features = ["csr"] }
+yew-router = "0.17.0"

src/main.rs

@@ -1,12 +1,45 @@
 mod topbar;
 
 use yew::prelude::*;
+use yew_router::prelude::*;
 use topbar::TopBar;
 
+#[derive(Clone, Routable, PartialEq)]
+enum Route {
+    #[at("/")]
+    Home,
+    #[at("/services")]
+    Services,
+    #[at("/community")]
+    Community,
+    #[at("/about")]
+    About,
+    #[not_found]
+    #[at("/404")]
+    NotFound,
+}
+
+fn switch(routes: Route) -> Html {
+    match routes {
+        Route::Home => html! { <h1>{ "Home" }</h1> },
+        Route::Services => html! {<h1>{ "Services" }</h1>},
+        Route::Community => html! {<h1>{ "Community" }</h1>},
+        Route::About => html! {<h1>{ "About" }</h1>},
+        Route::NotFound => html! { <h1>{ "404" }</h1> },
+    }
+}
+
 #[function_component]
 fn App() -> Html {
     html! {
-        <TopBar/>
+        <div>
+            <TopBar/>
+            <main>
+                <BrowserRouter>
+                    <Switch<Route> render={switch} />
+                </BrowserRouter>
+            </main>
+        </div>
     }
 }