Add HashRouter, basename and use gloo-history (#2239)

* Migrate to gloo-history.

* Fix docs wording.

* Add basename handling to navigator.

* Fix basename handling.

* Add lints and tests.

* Fix wording.

* Fix docs.

* Fix pr-flow.

* Fix some documentation.

* Add Navigator Kind.

* Remove history.rs

* Add documentation for navigator & Concrete Router Props.

* Update website/docs/concepts/router.md

Co-authored-by: Julius Lungys <32368314+voidpumpkin@users.noreply.github.com>

* Add docs about basename.

* Update documentation.

* Fix docs.

Co-authored-by: Julius Lungys <32368314+voidpumpkin@users.noreply.github.com>

examples/router/src/pages/post_list.rs

@@ -13,7 +13,7 @@ pub enum Msg {
 
 pub struct PostList {
     page: u64,
-    _listener: HistoryListener,
+    _listener: LocationHandle,
 }
 
 fn current_page(ctx: &Context<PostList>) -> u64 {
@@ -28,9 +28,10 @@ impl Component for PostList {
 
     fn create(ctx: &Context<Self>) -> Self {
         let link = ctx.link().clone();
-        let listener = ctx.link().history().unwrap().listen(move || {
-            link.send_message(Msg::PageUpdated);
-        });
+        let listener = ctx
+            .link()
+            .add_location_listener(link.callback(move |_| Msg::PageUpdated))
+            .unwrap();
 
         Self {
             page: current_page(ctx),

packages/yew-router-macro/src/routable_derive.rs

@@ -88,6 +88,22 @@ fn parse_variants_attributes(
         };
 
         let lit = attr.parse_args::<LitStr>()?;
+        let val = lit.value();
+
+        if val.find('#').is_some() {
+            return Err(syn::Error::new_spanned(
+                lit,
+                "You cannot use `#` in your routes. Please consider `HashRouter` instead.",
+            ));
+        }
+
+        if !val.starts_with('/') {
+            return Err(syn::Error::new_spanned(
+                lit,
+                "relative paths are not supported at this moment.",
+            ));
+        }
+
         ats.push(lit);
 
         for attr in attrs.iter() {

packages/yew-router-macro/tests/routable_derive/relative-path-fail.rs

@@ -0,0 +1,7 @@
+#[derive(yew_router::Routable)]
+enum Routes {
+    #[at("one")]
+    One,
+}
+
+fn main() {}

packages/yew-router-macro/tests/routable_derive/relative-path-fail.stderr

@@ -0,0 +1,5 @@
+error: relative paths are not supported at this moment.
+ --> tests/routable_derive/relative-path-fail.rs:3:10
+  |
+3 |     #[at("one")]
+  |          ^^^^^

packages/yew-router-macro/tests/routable_derive/route-with-hash-fail.rs

@@ -0,0 +1,7 @@
+#[derive(yew_router::Routable)]
+enum Routes {
+    #[at("/#/one")]
+    One,
+}
+
+fn main() {}

packages/yew-router-macro/tests/routable_derive/route-with-hash-fail.stderr

@@ -0,0 +1,5 @@
+error: You cannot use `#` in your routes. Please consider `HashRouter` instead.
+ --> tests/routable_derive/route-with-hash-fail.rs:3:10
+  |
+3 |     #[at("/#/one")]
+  |          ^^^^^^^^

packages/yew-router/Cargo.toml

@@ -20,7 +20,7 @@ gloo-utils = "0.1"
 
 wasm-bindgen = "0.2"
 js-sys = "0.3"
-gloo = { version = "0.4", features = ["futures"] }
+gloo = { version = "0.5", features = ["futures"] }
 route-recognizer = "0.3"
 serde = "1"
 serde_urlencoded = "0.7"

packages/yew-router/src/components/link.rs

@@ -5,7 +5,7 @@ use wasm_bindgen::UnwrapThrowExt;
 use yew::prelude::*;
 use yew::virtual_dom::AttrValue;
 
-use crate::history::{BrowserHistory, History};
+use crate::navigator::NavigatorKind;
 use crate::scope_ext::RouterScopeExt;
 use crate::Routable;
 
@@ -63,13 +63,16 @@ where
         match msg {
             Msg::OnClick => {
                 let LinkProps { to, query, .. } = ctx.props();
-                let history = ctx.link().history().expect_throw("failed to read history");
+                let navigator = ctx
+                    .link()
+                    .navigator()
+                    .expect_throw("failed to get navigator");
                 match query {
                     None => {
-                        history.push(to.clone());
+                        navigator.push(to.clone());
                     }
                     Some(data) => {
-                        history
+                        navigator
                             .push_with_query(to.clone(), data.clone())
                             .expect_throw("failed push history with query");
                     }
@@ -91,7 +94,20 @@ where
             e.prevent_default();
             Msg::OnClick
         });
-        let href: AttrValue = BrowserHistory::route_to_url(to).into();
+
+        let navigator = ctx
+            .link()
+            .navigator()
+            .expect_throw("failed to get navigator");
+        let href: AttrValue = {
+            let href = navigator.route_to_url(to);
+
+            match navigator.kind() {
+                NavigatorKind::Hash => format!("#{}", href).into(),
+                _ => href,
+            }
+            .into()
+        };
         html! {
             <a class={classes}
                 {href}

packages/yew-router/src/components/redirect.rs

@@ -1,8 +1,7 @@
 use wasm_bindgen::UnwrapThrowExt;
 use yew::prelude::*;
 
-use crate::history::History;
-use crate::hooks::use_history;
+use crate::hooks::use_navigator;
 use crate::Routable;
 
 /// Props for [`Redirect`]
@@ -18,7 +17,7 @@ pub fn redirect<R>(props: &RedirectProps<R>) -> Html
 where
     R: Routable + 'static,
 {
-    let history = use_history().expect_throw("failed to read history.");
+    let history = use_navigator().expect_throw("failed to read history.");
 
     let target_route = props.to.clone();
     use_effect(move || {