yew-router: Dynamic basename.

packages/yew-router/src/navigator.rs

@@ -159,7 +159,7 @@ impl Navigator {
  pub(crate) fn prefix_basename<'a>(&self, route_s: &'a str) -> Cow<'a, str> {
  match self.basename() {
  Some(base) => {
- if route_s.is_empty() && route_s.is_empty() {
+ if base.is_empty() && route_s.is_empty() {
  Cow::from("/")
  } else {
  Cow::from(format!("{base}{route_s}"))

packages/yew-router/src/router.rs

@@ -1,6 +1,8 @@
 //! Router Component.
+use std::borrow::Cow;
 use std::rc::Rc;
 
+use gloo::history::query::Raw;
 use yew::prelude::*;
 use yew::virtual_dom::AttrValue;
 
@@ -72,16 +74,43 @@ fn base_router(props: &RouterProps) -> Html {
  basename,
  } = props.clone();
 
+ let basename = basename.map(|m| strip_slash_suffix(&m).to_owned());
+ let navigator = Navigator::new(history.clone(), basename.clone());
+
+ let old_basename = use_mut_ref(|| Option::<String>::None);
+ let mut old_basename = old_basename.borrow_mut();
+ if basename != *old_basename {
+ // If `old_basename` is `Some`, path is probably prefixed with `old_basename`.
+ // If `old_basename` is `None`, path may or may not be prefixed with the new `basename`,
+ // depending on whether this is the first render.
+ let old_navigator = Navigator::new(
+ history.clone(),
+ old_basename.as_ref().or(basename.as_ref()).cloned(),
+ );
+ *old_basename = basename.clone();
+ let location = history.location();
+ let stripped = old_navigator.strip_basename(Cow::from(location.path()));
+ let prefixed = navigator.prefix_basename(&stripped);
+
+ if prefixed != location.path() {
+ history
+ .replace_with_query(prefixed, Raw(location.query_str()))
+ .unwrap_or_else(|never| match never {});
+ } else {
+ // Reaching here is possible if the page loads with the correct path, including the
+ // initial basename. In that case, the new basename would be stripped and then
+ // prefixed right back. While replacing the history would probably be harmless,
+ // we might as well avoid doing it.
+ }
+ }
+
+ let navi_ctx = NavigatorContext { navigator };
+
  let loc_ctx = use_reducer(|| LocationContext {
  location: history.location(),
  ctr: 0,
  });
 
- let basename = basename.map(|m| strip_slash_suffix(&m).to_string());
- let navi_ctx = NavigatorContext {
- navigator: Navigator::new(history.clone(), basename),
- };
-
  {
  let loc_ctx_dispatcher = loc_ctx.dispatcher();
 

packages/yew-router/tests/link.rs

@@ -1,5 +1,8 @@
+use std::sync::atomic::{AtomicU8, Ordering};
 use std::time::Duration;
 
+use gloo::utils::window;
+use js_sys::{JsString, Object, Reflect};
 use serde::{Deserialize, Serialize};
 use wasm_bindgen_test::{wasm_bindgen_test as test, wasm_bindgen_test_configure};
 use yew::functional::function_component;
@@ -47,8 +50,20 @@ enum Routes {
  Search,
 }
 
+#[derive(PartialEq, Properties)]
+struct NavigationMenuProps {
+ #[prop_or(None)]
+ assertion: Option<fn(&Navigator, &Location)>,
+}
+
 #[function_component(NavigationMenu)]
-fn navigation_menu() -> Html {
+fn navigation_menu(props: &NavigationMenuProps) -> Html {
+ let navigator = use_navigator().unwrap();
+ let location = use_location().unwrap();
+ if let Some(assertion) = props.assertion {
+ assertion(&navigator, &location);
+ }
+
  html! {
  <ul>
  <li class="posts">
@@ -89,12 +104,11 @@ fn root_for_browser_router() -> Html {
  }
 }
 
-#[test]
 async fn link_in_browser_router() {
  let div = gloo::utils::document().create_element("div").unwrap();
  let _ = div.set_attribute("id", "browser-router");
  let _ = gloo::utils::body().append_child(&div);
- yew::Renderer::<RootForBrowserRouter>::with_root(div).render();
+ let handle = yew::Renderer::<RootForBrowserRouter>::with_root(div).render();
 
  sleep(Duration::ZERO).await;
 
@@ -113,26 +127,77 @@ async fn link_in_browser_router() {
  "/search?q=Rust&lang=en_US",
  link_href("#browser-router ul > li.search-q-lang > a")
  );
+
+ handle.destroy();
+}
+
+#[derive(PartialEq, Properties)]
+struct BasenameProps {
+ basename: Option<String>,
+ assertion: fn(&Navigator, &Location),
 }
 
 #[function_component(RootForBasename)]
-fn root_for_basename() -> Html {
+fn root_for_basename(props: &BasenameProps) -> Html {
  html! {
- <BrowserRouter basename="/base/">
- <NavigationMenu />
+ <BrowserRouter basename={props.basename.clone()}>
+ <NavigationMenu assertion={props.assertion}/>
  </BrowserRouter>
  }
 }
 
-#[test]
-async fn link_with_basename() {
+async fn link_with_basename(correct_initial_path: bool) {
+ if correct_initial_path {
+ let cookie = Object::new();
+ Reflect::set(&cookie, &JsString::from("foo"), &JsString::from("bar")).unwrap();
+ window()
+ .history()
+ .unwrap()
+ .replace_state_with_url(&cookie, "", Some("/base/"))
+ .unwrap();
+ }
+
+ static RENDERS: AtomicU8 = AtomicU8::new(0);
+ RENDERS.store(0, Ordering::Relaxed);
+
  let div = gloo::utils::document().create_element("div").unwrap();
  let _ = div.set_attribute("id", "with-basename");
  let _ = gloo::utils::body().append_child(&div);
- yew::Renderer::<RootForBasename>::with_root(div).render();
+
+ let mut handle = yew::Renderer::<RootForBasename>::with_root_and_props(
+ div,
+ BasenameProps {
+ basename: Some("/base/".to_owned()),
+ assertion: |navigator, location| {
+ RENDERS.fetch_add(1, Ordering::Relaxed);
+ assert_eq!(navigator.basename(), Some("/base"));
+ assert_eq!(location.path(), "/base/");
+ },
+ },
+ )
+ .render();
 
  sleep(Duration::ZERO).await;
 
+ if correct_initial_path {
+ // If the initial path was correct, the router shouldn't have mutated the history.
+ assert_eq!(
+ Reflect::get(
+ &window().history().unwrap().state().unwrap(),
+ &JsString::from("foo")
+ )
+ .unwrap()
+ .as_string()
+ .as_deref(),
+ Some("bar")
+ );
+ }
+
+ assert_eq!(
+ "/base/",
+ gloo::utils::window().location().pathname().unwrap()
+ );
+
  assert_eq!("/base/posts", link_href("#with-basename ul > li.posts > a"));
  assert_eq!(
  "/base/posts?page=2",
@@ -151,6 +216,68 @@ async fn link_with_basename() {
  "/base/search?q=Rust&lang=en_US",
  link_href("#with-basename ul > li.search-q-lang > a")
  );
+
+ // Some(a) -> Some(b)
+ handle.update(BasenameProps {
+ basename: Some("/bayes/".to_owned()),
+ assertion: |navigator, location| {
+ RENDERS.fetch_add(1, Ordering::Relaxed);
+ assert_eq!(navigator.basename(), Some("/bayes"));
+ assert_eq!(location.path(), "/bayes/");
+ },
+ });
+
+ sleep(Duration::ZERO).await;
+
+ assert_eq!(
+ "/bayes/",
+ gloo::utils::window().location().pathname().unwrap()
+ );
+
+ assert_eq!(
+ "/bayes/posts",
+ link_href("#with-basename ul > li.posts > a")
+ );
+
+ // Some -> None
+ handle.update(BasenameProps {
+ basename: None,
+ assertion: |navigator, location| {
+ RENDERS.fetch_add(1, Ordering::Relaxed);
+ assert_eq!(navigator.basename(), None);
+ assert_eq!(location.path(), "/");
+ },
+ });
+
+ sleep(Duration::ZERO).await;
+
+ assert_eq!("/", gloo::utils::window().location().pathname().unwrap());
+
+ assert_eq!("/posts", link_href("#with-basename ul > li.posts > a"));
+
+ // None -> Some
+ handle.update(BasenameProps {
+ basename: Some("/bass/".to_string()),
+ assertion: |navigator, location| {
+ RENDERS.fetch_add(1, Ordering::Relaxed);
+ assert_eq!(navigator.basename(), Some("/bass"));
+ assert_eq!(location.path(), "/bass/");
+ },
+ });
+
+ sleep(Duration::ZERO).await;
+
+ assert_eq!(
+ "/bass/",
+ gloo::utils::window().location().pathname().unwrap()
+ );
+
+ assert_eq!("/bass/posts", link_href("#with-basename ul > li.posts > a"));
+
+ handle.destroy();
+
+ // 1 initial, 1 rerender after initial, 3 props changes
+ assert_eq!(RENDERS.load(Ordering::Relaxed), 5);
 }
 
 #[function_component(RootForHashRouter)]
@@ -162,12 +289,11 @@ fn root_for_hash_router() -> Html {
  }
 }
 
-#[test]
 async fn link_in_hash_router() {
  let div = gloo::utils::document().create_element("div").unwrap();
  let _ = div.set_attribute("id", "hash-router");
  let _ = gloo::utils::body().append_child(&div);
- yew::Renderer::<RootForHashRouter>::with_root(div).render();
+ let handle = yew::Renderer::<RootForHashRouter>::with_root(div).render();
 
  sleep(Duration::ZERO).await;
 
@@ -186,4 +312,15 @@ async fn link_in_hash_router() {
  "#/search?q=Rust&lang=en_US",
  link_href("#hash-router ul > li.search-q-lang > a")
  );
+
+ handle.destroy();
+}
+
+// These cannot be run in concurrently because they all read/write the URL.
+#[test]
+async fn sequential_tests() {
+ link_in_hash_router().await;
+ link_in_browser_router().await;
+ link_with_basename(false).await;
+ link_with_basename(true).await;
 }