Started with yew router

project/backend/.env

@@ -1,5 +1,5 @@
 APP_NAME=thesis
-BIND=127.0.0.1
+BIND=0.0.0.0
 PORT=3880
 DOMAIN=localhost
 DATABASE_URL=mysql://diesel:fuel@localhost/thesis

project/frontend/src/main.rs

@@ -1,44 +1,60 @@
+#![recursion_limit = "256"]
+
 mod component;
 
 use component::login::LoginComponent;
 use yew::prelude::*;
+use yew::virtual_dom::VNode;
+use yew_router::{prelude::*, switch::Permissive, Switch};
 
-struct App {
+struct App {}
-    clicked: bool,
-    onclick: Callback<ClickEvent>,
-}
 
-enum Msg {
+#[derive(Debug, Switch, Clone)]
-    Click,
+enum AppRoute {
+    #[to = "/"]
+    Root,
+    #[to = "/login"]
+    Login,
+    PageNotFound(Permissive<String>),
 }
 
 impl Component for App {
-    type Message = Msg;
+    type Message = ();
     type Properties = ();
 
-    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(_: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        App {
+        App {}
-            clicked: false,
-            onclick: link.callback(|_| Msg::Click),
-        }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        match msg {
+        true
-            Msg::Click => {
-                if self.clicked {
-                    self.clicked = false;
-                } else {
-                    self.clicked = true
-                }
-                true
-            }
-        }
     }
 
-    fn view(&self) -> Html {
+    fn view(&self) -> VNode {
         html! {
-            <LoginComponent:/>
+            <div>
+                <nav class="menu",>
+                    <RouterButton<AppRoute> route=AppRoute::Root>{"Go to Root"}</RouterButton<AppRoute>>
+                    <RouterButton<AppRoute> route=AppRoute::Login>{"Go to Login"}</RouterButton<AppRoute>>
+                </nav>
+                <div>
+                    <Router<AppRoute>
+                        render = Router::render(|switch: AppRoute| {
+                            match switch {
+                                AppRoute::Login => html!{<LoginComponent />},
+                                AppRoute::Root => {
+                                    html!{"hello there!"}
+                                },
+                                AppRoute::PageNotFound(Permissive(None)) => html!{"Page not found"},
+                                AppRoute::PageNotFound(Permissive(Some(missed_route))) => html!{format!("Page '{}' not found", missed_route)}
+                            }
+                        })
+                        redirect = Router::redirect(|route: Route| {
+                            AppRoute::PageNotFound(Permissive(Some(route.route)))
+                        })
+                    />
+                </div>
+            </div>
         }
     }
 }