From 9890238d571b960233d7b96b0165e550770ba927 Mon Sep 17 00:00:00 2001
From: Diggory Blake <diggsey@googlemail.com>
Date: Sat, 8 May 2021 16:17:50 +0100
Subject: [PATCH 1/3] Rewrite router more

---
 examples/router/src/main.rs                   |  29 +-
 examples/router/src/pages/post_list.rs        |  54 +-
 packages/yew-functional/src/lib.rs            |   2 +-
 packages/yew-router-macro/Cargo.toml          |   3 +-
 packages/yew-router-macro/src/lib.rs          |   2 +-
 .../yew-router-macro/src/routable_derive.rs   | 574 +++++++++++++-----
 packages/yew-router/Cargo.toml                |  15 +-
 packages/yew-router/src/agents.rs             |   2 +
 packages/yew-router/src/agents/history.rs     | 220 +++++++
 packages/yew-router/src/agents/router.rs      |  92 +++
 packages/yew-router/src/components/link.rs    |  52 +-
 packages/yew-router/src/context.rs            |  12 +
 packages/yew-router/src/hidden.rs             | 440 ++++++++++++++
 packages/yew-router/src/lib.rs                |  15 +-
 packages/yew-router/src/macro_helpers.rs      |  39 --
 packages/yew-router/src/routable.rs           |  34 +-
 packages/yew-router/src/router.rs             | 218 ++++---
 packages/yew-router/src/service.rs            |  85 ---
 packages/yew-router/src/utils.rs              |  36 +-
 packages/yew-router/tests/parser.rs           |  68 +--
 packages/yew-router/tests/router.rs           |  62 +-
 21 files changed, 1481 insertions(+), 573 deletions(-)
 create mode 100644 packages/yew-router/src/agents.rs
 create mode 100644 packages/yew-router/src/agents/history.rs
 create mode 100644 packages/yew-router/src/agents/router.rs
 create mode 100644 packages/yew-router/src/context.rs
 create mode 100644 packages/yew-router/src/hidden.rs
 delete mode 100644 packages/yew-router/src/macro_helpers.rs
 delete mode 100644 packages/yew-router/src/service.rs

diff --git a/examples/router/src/main.rs b/examples/router/src/main.rs
index 26c2dab0cfb..7ee9b47d5dc 100644
--- a/examples/router/src/main.rs
+++ b/examples/router/src/main.rs
@@ -9,30 +9,41 @@ use pages::{
     author::Author, author_list::AuthorList, home::Home, page_not_found::PageNotFound, post::Post,
     post_list::PostList,
 };
+use yew_router::router::RouterUpdate;
 
 #[derive(Routable, PartialEq, Clone, Debug)]
 pub enum Route {
     #[at("/posts/:id")]
     Post { id: u64 },
     #[at("/posts")]
-    Posts,
+    Posts {
+        #[bind(query_arg = "p")]
+        page: u64,
+    },
     #[at("/authors/:id")]
     Author { id: u64 },
     #[at("/authors")]
     Authors,
     #[at("/")]
     Home,
-    #[not_found]
     #[at("/404")]
     NotFound,
 }
 
+impl Default for Route {
+    fn default() -> Self {
+        Route::NotFound
+    }
+}
+
 pub enum Msg {
     ToggleNavbar,
+    RouteChanged(RouterUpdate<Route>),
 }
 
 pub struct Model {
     link: ComponentLink<Self>,
+    router: Router<Route>,
     navbar_active: bool,
 }
 impl Component for Model {
@@ -40,8 +51,10 @@ impl Component for Model {
     type Properties = ();
 
     fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
+        let router = Router::new(link.clone(), link.callback(Msg::RouteChanged));
         Self {
             link,
+            router,
             navbar_active: false,
         }
     }
@@ -52,6 +65,10 @@ impl Component for Model {
                 self.navbar_active = !self.navbar_active;
                 true
             }
+            Msg::RouteChanged(update) => {
+                self.router.update(update);
+                true
+            }
         }
     }
 
@@ -65,7 +82,7 @@ impl Component for Model {
                 { self.view_nav() }
 
                 <main>
-                    <Router<Route> render=Router::render(switch) />
+                    { switch(&self.router.route()) }
                 </main>
                 <footer class="footer">
                     <div class="content has-text-centered">
@@ -111,7 +128,7 @@ impl Model {
                         <Link<Route> classes=classes!("navbar-item") route=Route::Home>
                             { "Home" }
                         </Link<Route>>
-                        <Link<Route> classes=classes!("navbar-item") route=Route::Posts>
+                        <Link<Route> classes=classes!("navbar-item") route=Route::Posts { page: 1 }>
                             { "Posts" }
                         </Link<Route>>
 
@@ -139,8 +156,8 @@ fn switch(routes: &Route) -> Html {
         Route::Post { id } => {
             html! { <Post seed=*id /> }
         }
-        Route::Posts => {
-            html! { <PostList /> }
+        Route::Posts { page } => {
+            html! { <PostList page=*page /> }
         }
         Route::Author { id } => {
             html! { <Author seed=*id /> }
diff --git a/examples/router/src/pages/post_list.rs b/examples/router/src/pages/post_list.rs
index bbd76c657d4..9876cabce8c 100644
--- a/examples/router/src/pages/post_list.rs
+++ b/examples/router/src/pages/post_list.rs
@@ -1,46 +1,42 @@
 use crate::components::{pagination::Pagination, post_card::PostCard};
 use crate::Route;
-use serde::{Deserialize, Serialize};
 use yew::prelude::*;
+use yew_router::{Router, RouterAction};
 
 const ITEMS_PER_PAGE: u64 = 10;
 const TOTAL_PAGES: u64 = u64::MAX / ITEMS_PER_PAGE;
 
-pub enum Msg {
-    ShowPage(u64),
-}
-
-#[derive(Serialize, Deserialize)]
-struct PageQuery {
-    page: u64,
+#[derive(Properties, Clone)]
+pub struct PostListProps {
+    pub page: u64,
 }
 
 pub struct PostList {
-    link: ComponentLink<Self>,
+    router: Router<crate::Route>,
+    props: PostListProps,
 }
 impl Component for PostList {
-    type Message = Msg;
-    type Properties = ();
+    type Message = ();
+    type Properties = PostListProps;
 
-    fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
-        Self { link }
+    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+        let router = Router::new(link, Callback::noop());
+        Self { router, props }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
-        match msg {
-            Msg::ShowPage(page) => {
-                yew_router::push_route_with_query(Route::Posts, PageQuery { page }).unwrap();
-                true
-            }
-        }
+    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+        false
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        false
+    fn change(&mut self, props: Self::Properties) -> ShouldRender {
+        self.props = props;
+        true
     }
 
     fn view(&self) -> Html {
-        let page = self.current_page();
+        let on_switch_page = self
+            .router
+            .dispatcher(|page| Some(RouterAction::Push(Route::Posts { page })));
 
         html! {
             <div class="section container">
@@ -48,9 +44,9 @@ impl Component for PostList {
                 <h2 class="subtitle">{ "All of our quality writing in one place" }</h2>
                 { self.view_posts() }
                 <Pagination
-                    page=page
+                    page=self.props.page
                     total_pages=TOTAL_PAGES
-                    on_switch_page=self.link.callback(Msg::ShowPage)
+                    on_switch_page=on_switch_page
                 />
             </div>
         }
@@ -58,7 +54,7 @@ impl Component for PostList {
 }
 impl PostList {
     fn view_posts(&self) -> Html {
-        let start_seed = (self.current_page() - 1) * ITEMS_PER_PAGE;
+        let start_seed = (self.props.page - 1) * ITEMS_PER_PAGE;
         let mut cards = (0..ITEMS_PER_PAGE).map(|seed_offset| {
             html! {
                 <li class="list-item mb-5">
@@ -81,10 +77,4 @@ impl PostList {
             </div>
         }
     }
-
-    fn current_page(&self) -> u64 {
-        yew_router::parse_query::<PageQuery>()
-            .map(|it| it.page)
-            .unwrap_or(1)
-    }
 }
diff --git a/packages/yew-functional/src/lib.rs b/packages/yew-functional/src/lib.rs
index fcb7a02d26c..f57b8434ce2 100644
--- a/packages/yew-functional/src/lib.rs
+++ b/packages/yew-functional/src/lib.rs
@@ -149,7 +149,7 @@ where
     }
 }
 
-pub(crate) fn get_current_scope() -> Option<AnyScope> {
+pub fn get_current_scope() -> Option<AnyScope> {
     if CURRENT_HOOK.is_set() {
         Some(CURRENT_HOOK.with(|state| state.scope.clone()))
     } else {
diff --git a/packages/yew-router-macro/Cargo.toml b/packages/yew-router-macro/Cargo.toml
index 25c6406a2e7..478b1c86fd2 100644
--- a/packages/yew-router-macro/Cargo.toml
+++ b/packages/yew-router-macro/Cargo.toml
@@ -14,7 +14,8 @@ proc-macro = true
 heck = "0.3.2"
 proc-macro2 = "1.0.24"
 quote = "1.0.9"
-syn = { version = "1.0.64", features = ["full","extra-traits"] }
+syn = { version = "1.0.64", features = ["full", "extra-traits"] }
+regex = "1.5.4"
 
 [dev-dependencies]
 rustversion = "1.0"
diff --git a/packages/yew-router-macro/src/lib.rs b/packages/yew-router-macro/src/lib.rs
index 7151bdc11ce..cd32de2d56e 100644
--- a/packages/yew-router-macro/src/lib.rs
+++ b/packages/yew-router-macro/src/lib.rs
@@ -23,7 +23,7 @@ use syn::parse_macro_input;
 ///     NotFound,
 /// }
 /// ```
-#[proc_macro_derive(Routable, attributes(at, not_found))]
+#[proc_macro_derive(Routable, attributes(at, bind))]
 pub fn routable_derive(input: proc_macro::TokenStream) -> proc_macro::TokenStream {
     let input = parse_macro_input!(input as Routable);
     routable_derive_impl(input).into()
diff --git a/packages/yew-router-macro/src/routable_derive.rs b/packages/yew-router-macro/src/routable_derive.rs
index 879a0fbdda5..9929af511c3 100644
--- a/packages/yew-router-macro/src/routable_derive.rs
+++ b/packages/yew-router-macro/src/routable_derive.rs
@@ -1,18 +1,22 @@
-use proc_macro2::TokenStream;
-use quote::quote;
+use std::collections::BTreeMap;
+
+use proc_macro2::{Span, TokenStream};
+use quote::{format_ident, quote};
 use syn::parse::{Parse, ParseStream};
 use syn::punctuated::Punctuated;
 use syn::spanned::Spanned;
-use syn::{Data, DeriveInput, Fields, Ident, LitStr, Variant};
+use syn::{Data, DeriveInput, Fields, Ident, LitStr, Meta, Variant};
 
 const AT_ATTR_IDENT: &str = "at";
-const NOT_FOUND_ATTR_IDENT: &str = "not_found";
+const BIND_ATTR_IDENT: &str = "bind";
+
+fn hidden_module() -> TokenStream {
+    quote! { ::yew_router::hidden }
+}
 
 pub struct Routable {
     ident: Ident,
-    ats: Vec<LitStr>,
-    variants: Punctuated<Variant, syn::token::Comma>,
-    not_found_route: Option<Ident>,
+    variants: Vec<ParsedVariant>,
 }
 
 impl Parse for Routable {
@@ -22,197 +26,483 @@ impl Parse for Routable {
         let data = match data {
             Data::Enum(data) => data,
             Data::Struct(s) => {
-                return Err(syn::Error::new(
-                    s.struct_token.span(),
+                return Err(syn::Error::new_spanned(
+                    s.struct_token,
                     "expected enum, found struct",
                 ))
             }
             Data::Union(u) => {
-                return Err(syn::Error::new(
-                    u.union_token.span(),
+                return Err(syn::Error::new_spanned(
+                    u.union_token,
                     "expected enum, found union",
                 ))
             }
         };
 
-        let (not_found_route, ats) = parse_variants_attributes(&data.variants)?;
+        let variants = parse_variants(&ident, &data.variants)?;
+
+        Ok(Self { ident, variants })
+    }
+}
+
+#[derive(Debug)]
+struct ParsedField {
+    name: String,
+    index: usize,
+    meta: Option<Meta>,
+}
+
+#[derive(Debug, Copy, Clone, PartialEq, Eq, PartialOrd, Ord)]
+enum BindMode {
+    Rest,
+    Path,
+    QueryArg,
+    HashArg,
+    PopState,
+}
 
-        Ok(Self {
-            ident,
-            variants: data.variants,
-            ats,
-            not_found_route,
+enum BindType {
+    String,
+    Serde,
+    Rest,
+}
+
+impl BindType {
+    fn decoder(&self) -> TokenStream {
+        let hidden = hidden_module();
+        match self {
+            BindType::Rest => quote! { #hidden::Routable::from_route(args.take_route()).ok() },
+            BindType::String => quote! { args.pop_str() },
+            BindType::Serde => quote! { args.pop_serde() },
+        }
+    }
+    fn encoder(&self, arg: &Ident) -> TokenStream {
+        let hidden = hidden_module();
+        match self {
+            BindType::Rest => quote! { args.store_route(#hidden::Routable::to_route(#arg)); },
+            BindType::String => quote! { args.push_str(#arg); },
+            BindType::Serde => quote! { args.push_serde(#arg); },
+        }
+    }
+}
+
+struct ConstMuncher {
+    muncher: Option<TokenStream>,
+    binds: Vec<(usize, BindType)>,
+}
+
+fn generate_path_muncher(fields: &[ParsedField], at: &ParsedAt) -> syn::Result<ConstMuncher> {
+    let hidden = hidden_module();
+    let mut binds = Vec::new();
+    for name in &at.names {
+        if let Some(field) = fields.iter().find(|field| &field.name == name) {
+            binds.push((field.index, BindType::String));
+        } else {
+            return Err(syn::Error::new(
+                at.span,
+                format_args!("No field named {:?}", name),
+            ));
+        }
+    }
+    let parts: TokenStream = at
+        .parts
+        .iter()
+        .map(|part| match part {
+            PathPart::Match(s) => quote! { #hidden::PathPart::Match(#s), },
+            PathPart::ExtractOne => quote! { #hidden::PathPart::ExtractOne, },
+            PathPart::ExtractAll => quote! { #hidden::PathPart::ExtractAll, },
         })
+        .collect();
+    Ok(ConstMuncher {
+        muncher: Some(quote! {
+            #hidden::PathSegmentMuncher {
+                parts: &[#parts]
+            }
+        }),
+        binds,
+    })
+}
+
+fn generate_arg_muncher(muncher: &Ident, fields: &[ParsedField]) -> syn::Result<ConstMuncher> {
+    let hidden = hidden_module();
+    let mut binds = Vec::new();
+    let mut names = Vec::new();
+    for field in fields {
+        let name = match &field.meta {
+            Some(syn::Meta::Path(_)) => field.name.clone(),
+            Some(syn::Meta::NameValue(syn::MetaNameValue {
+                lit: syn::Lit::Str(name),
+                ..
+            })) => name.value(),
+            _ => {
+                return Err(syn::Error::new(
+                    field.meta.span(),
+                    "Invalid argument binding",
+                ))
+            }
+        };
+        names.push(name);
+        binds.push((field.index, BindType::String));
     }
+    Ok(ConstMuncher {
+        muncher: Some(quote! {
+            #hidden::#muncher {
+                names: &[#(#names,)*]
+            }
+        }),
+        binds,
+    })
 }
 
-fn parse_variants_attributes(
-    variants: &Punctuated<Variant, syn::token::Comma>,
-) -> syn::Result<(Option<Ident>, Vec<LitStr>)> {
-    let mut not_founds = vec![];
-    let mut ats: Vec<LitStr> = vec![];
+fn generate_pop_state_muncher(fields: &[ParsedField]) -> syn::Result<ConstMuncher> {
+    let hidden = hidden_module();
+    let mut binds = Vec::new();
+    for field in fields {
+        binds.push((field.index, BindType::Serde));
+    }
 
-    let mut not_found_attrs = vec![];
+    let count = fields.len();
 
-    for variant in variants.iter() {
-        if let Fields::Unnamed(ref field) = variant.fields {
+    Ok(ConstMuncher {
+        muncher: Some(quote! {
+            #hidden::PopStateMuncher {
+                count: #count
+            }
+        }),
+        binds,
+    })
+}
+
+fn generate_rest_glue(fields: &[ParsedField]) -> syn::Result<ConstMuncher> {
+    let binds = match fields {
+        [field] => vec![(field.index, BindType::Rest)],
+        _ => {
+            return Err(syn::Error::new(
+                Span::call_site(),
+                "Only one `rest` binding can be used",
+            ))
+        }
+    };
+
+    Ok(ConstMuncher {
+        muncher: None,
+        binds,
+    })
+}
+
+impl BindMode {
+    fn from_path(path: &syn::Path) -> syn::Result<Self> {
+        Ok(if path.is_ident("query_arg") {
+            Self::QueryArg
+        } else if path.is_ident("hash_arg") {
+            Self::HashArg
+        } else if path.is_ident("pop_state") {
+            Self::PopState
+        } else if path.is_ident("rest") {
+            Self::Rest
+        } else {
             return Err(syn::Error::new(
-                field.span(),
-                "only named fields are supported",
+                path.span(),
+                format!("Unknown binding mode: {:?}", path),
             ));
+        })
+    }
+    fn parse_and_gen(&self, fields: Vec<ParsedField>, at: &ParsedAt) -> syn::Result<ConstMuncher> {
+        match self {
+            BindMode::Path => generate_path_muncher(&fields, at),
+            BindMode::QueryArg => {
+                generate_arg_muncher(&Ident::new("QueryArgMuncher", Span::call_site()), &fields)
+            }
+            BindMode::HashArg => {
+                generate_arg_muncher(&Ident::new("HashArgMuncher", Span::call_site()), &fields)
+            }
+            BindMode::PopState => generate_pop_state_muncher(&fields),
+            BindMode::Rest => generate_rest_glue(&fields),
         }
+    }
+}
 
-        let attrs = &variant.attrs;
-        let at_attrs = attrs
+fn parse_fields(fields: &Fields, at: &mut ParsedAt) -> syn::Result<Vec<ConstMuncher>> {
+    let mut map = BTreeMap::<_, Vec<_>>::default();
+
+    map.insert(BindMode::Path, Vec::new());
+    for (index, field) in fields.into_iter().enumerate() {
+        let name = if let Some(ident) = &field.ident {
+            ident.to_string()
+        } else {
+            index.to_string()
+        };
+        let bind_attrs: Vec<_> = field
+            .attrs
             .iter()
-            .filter(|attr| attr.path.is_ident(AT_ATTR_IDENT))
-            .collect::<Vec<_>>();
+            .filter(|attr| attr.path.is_ident(BIND_ATTR_IDENT))
+            .collect();
+        match bind_attrs.as_slice() {
+            [] => {
+                if !at.names.contains(&name) {
+                    return Err(syn::Error::new(field.span(), "Unbound field"));
+                }
 
-        let attr = match at_attrs.len() {
-            1 => *at_attrs.first().unwrap(),
-            0 => {
-                return Err(syn::Error::new(
-                    variant.span(),
-                    format!(
-                        "{} attribute must be present on every variant",
-                        AT_ATTR_IDENT
-                    ),
-                ))
+                map.entry(BindMode::Path).or_default().push(ParsedField {
+                    index,
+                    meta: None,
+                    name,
+                })
+            }
+            [attr] => {
+                let nested_meta = match attr.parse_meta()? {
+                    syn::Meta::List(mut ml) if ml.nested.len() == 1 => {
+                        ml.nested.pop().unwrap().into_value()
+                    }
+                    _ => return Err(syn::Error::new(field.span(), "Invalid binding attribute")),
+                };
+                let meta = match nested_meta {
+                    syn::NestedMeta::Meta(meta) => meta,
+                    _ => return Err(syn::Error::new(field.span(), "Invalid binding attribute")),
+                };
+                let bind_mode = BindMode::from_path(meta.path())?;
+                map.entry(bind_mode).or_default().push(ParsedField {
+                    index,
+                    meta: Some(meta),
+                    name,
+                });
             }
             _ => {
-                return Err(syn::Error::new_spanned(
-                    quote! { #(#at_attrs)* },
-                    format!("only one {} attribute must be present", AT_ATTR_IDENT),
+                return Err(syn::Error::new(
+                    field.span(),
+                    "Only one bind attribute allowed per field",
                 ))
             }
-        };
-
-        let lit = attr.parse_args::<LitStr>()?;
-        ats.push(lit);
+        }
+    }
 
-        for attr in attrs.iter() {
-            if attr.path.is_ident(NOT_FOUND_ATTR_IDENT) {
-                not_found_attrs.push(attr);
-                not_founds.push(variant.ident.clone())
-            }
+    if map.contains_key(&BindMode::Rest) {
+        // If we're binding the rest of the route to a field,
+        // allow the path to continue.
+        if at.regex.is_empty() {
+            at.regex += "/";
+        } else {
+            at.regex += "(?:/|$)";
+        }
+    } else {
+        // Otherwise, require the path to terminate.
+        if at.regex.is_empty() {
+            at.regex += "/$";
+        } else {
+            at.regex += "/?$";
         }
     }
 
-    if not_founds.len() > 1 {
-        return Err(syn::Error::new_spanned(
-            quote! { #(#not_found_attrs)* },
-            format!("there can only be one {}", NOT_FOUND_ATTR_IDENT),
-        ));
+    let mut res = Vec::new();
+    for (k, v) in map {
+        res.push(k.parse_and_gen(v, at)?);
     }
 
-    Ok((not_founds.into_iter().next(), ats))
+    Ok(res)
 }
 
-impl Routable {
-    fn build_from_path(&self) -> TokenStream {
-        let from_path_matches = self.variants.iter().enumerate().map(|(i, variant)| {
-            let ident = &variant.ident;
-            let right = match &variant.fields {
-                Fields::Unit => quote! { Self::#ident },
-                Fields::Named(field) => {
-                    let fields = field.named.iter().map(|it| {
-                        //named fields have idents
-                        it.ident.as_ref().unwrap()
-                    });
-                    quote! { Self::#ident { #(#fields: params.get(stringify!(#fields))?.parse().ok()?)*, } }
-                }
-                Fields::Unnamed(_) => unreachable!(), // already checked
-            };
+enum PathPart {
+    Match(String),
+    ExtractOne,
+    ExtractAll,
+}
 
-            let left = self.ats.get(i).unwrap();
-            quote! {
-                #left => ::std::option::Option::Some(#right)
-            }
-        });
+struct ParsedAt {
+    span: Span,
+    regex: String,
+    names: Vec<String>,
+    parts: Vec<PathPart>,
+}
 
-        quote! {
-            fn from_path(path: &str, params: &::std::collections::HashMap<&str, &str>) -> ::std::option::Option<Self> {
-                match path {
-                    #(#from_path_matches),*,
-                    _ => ::std::option::Option::None,
-                }
-            }
+fn parse_at(span: Span, at: &str) -> syn::Result<ParsedAt> {
+    if !at.starts_with("/") {
+        return Err(syn::Error::new(span, "Url must begin with /"));
+    }
+
+    let mut regex = "^".to_string();
+    let mut names = Vec::new();
+    let mut parts = Vec::new();
+
+    for part in at[1..].split("/") {
+        if part.is_empty() {
+            continue;
+        } else if let Some(name) = part.strip_prefix(":") {
+            regex += "/([^/]+)";
+            names.push(name.to_string());
+            parts.push(PathPart::ExtractOne);
+        } else if let Some(name) = part.strip_prefix("*") {
+            regex += "/(.+)";
+            names.push(name.to_string());
+            parts.push(PathPart::ExtractAll);
+        } else {
+            regex += "/";
+            regex += &regex::escape(part);
+            parts.push(PathPart::Match(part.into()));
         }
     }
 
-    fn build_to_path(&self) -> TokenStream {
-        let to_path_matches = self.variants.iter().enumerate().map(|(i, variant)| {
-            let ident = &variant.ident;
-            let mut right = self.ats.get(i).unwrap().value();
-
-            match &variant.fields {
-                Fields::Unit => quote! { Self::#ident => ::std::string::ToString::to_string(#right) },
-                Fields::Named(field) => {
-                    let fields = field
-                        .named
-                        .iter()
-                        .map(|it| it.ident.as_ref().unwrap())
-                        .collect::<Vec<_>>();
-
-                    for field in fields.iter() {
-                        // :param -> {param}
-                        // so we can pass it to `format!("...", param)`
-                        right = right.replace(&format!(":{}", field), &format!("{{{}}}", field))
-                    }
+    if regex.is_empty() {
+        regex += "/";
+    } else {
+        regex += "(?:/|$)";
+    }
 
+    Ok(ParsedAt {
+        regex,
+        names,
+        parts,
+        span,
+    })
+}
+
+struct ParsedVariant {
+    parsed_at: ParsedAt,
+    munchers: Vec<ConstMuncher>,
+    pattern: TokenStream,
+}
+
+fn parse_variants(
+    ident: &Ident,
+    variants: &Punctuated<Variant, syn::token::Comma>,
+) -> syn::Result<Vec<ParsedVariant>> {
+    let mut res = Vec::new();
+
+    for variant in variants.iter() {
+        let variant: &syn::Variant = variant;
+
+        let attrs = &variant.attrs;
+        let at_attrs = attrs
+            .iter()
+            .filter(|attr| attr.path.is_ident(AT_ATTR_IDENT))
+            .collect::<Vec<_>>();
+
+        let at_attr = if let [attr] = at_attrs.as_slice() {
+            *attr
+        } else {
+            return Err(syn::Error::new(
+                variant.span(),
+                format!(
+                    "exactly one {} attribute must be present on each variant",
+                    AT_ATTR_IDENT
+                ),
+            ));
+        };
+
+        let at_str = at_attr.parse_args::<LitStr>()?.value();
+        let mut parsed_at = parse_at(at_attr.span(), &at_str)?;
+        let munchers = parse_fields(&variant.fields, &mut parsed_at)?;
+
+        res.push(ParsedVariant {
+            parsed_at,
+            munchers,
+            pattern: fields_to_pattern(ident, &variant.ident, &variant.fields),
+        });
+    }
+
+    Ok(res)
+}
+
+fn fields_to_pattern(ident: &Ident, variant_ident: &Ident, fields: &Fields) -> TokenStream {
+    match fields {
+        Fields::Unit => quote! { #ident :: #variant_ident },
+        Fields::Named(named) => {
+            let bindings: TokenStream = named
+                .named
+                .iter()
+                .enumerate()
+                .map(|(index, field)| {
+                    let field_ident = field.ident.as_ref().expect("Named fields to have a name");
+                    let bind_ident = format_ident!("arg{}", index);
                     quote! {
-                        Self::#ident { #(#fields),* } => ::std::format!(#right, #(#fields = #fields),*)
+                        #field_ident: #bind_ident,
                     }
-                }
-                Fields::Unnamed(_) => unreachable!(), // already checked
+                })
+                .collect();
+            quote! {
+                #ident :: #variant_ident { #bindings }
             }
-        });
-
-        quote! {
-            fn to_path(&self) -> ::std::string::String {
-                match self {
-                    #(#to_path_matches),*,
-                }
+        }
+        Fields::Unnamed(unnamed) => {
+            let bindings: TokenStream = (0..unnamed.unnamed.len())
+                .map(|index| {
+                    let bind_ident = format_ident!("arg{}", index);
+                    quote! {
+                        #bind_ident,
+                    }
+                })
+                .collect();
+            quote! {
+                #ident :: #variant_ident { #bindings }
             }
         }
     }
 }
 
 pub fn routable_derive_impl(input: Routable) -> TokenStream {
-    let Routable {
-        ats,
-        not_found_route,
-        ident,
-        ..
-    } = &input;
-
-    let from_path = input.build_from_path();
-    let to_path = input.build_to_path();
-
-    let not_found_route = match not_found_route {
-        Some(route) => quote! { ::std::option::Option::Some(Self::#route) },
-        None => quote! { ::std::option::Option::None },
-    };
+    let Routable { ident, variants } = input;
 
-    quote! {
-        #[automatically_derived]
-        impl ::yew_router::Routable for #ident {
-            #from_path
-            #to_path
+    let hidden = hidden_module();
+
+    let variants_arr = variants.iter().map(|variant| {
+        let regex = &variant.parsed_at.regex;
+        let pattern = &variant.pattern;
 
-            fn routes() -> ::std::vec::Vec<&'static str> {
-                ::std::vec![#(#ats),*]
+        let munchers = variant.munchers.iter().map(|muncher| &muncher.muncher);
+        let decode_args: TokenStream = variant
+            .munchers
+            .iter()
+            .flat_map(|m| &m.binds)
+            .map(|(index, bind_type)| {
+                let name = format_ident!("arg{}", index);
+                let decoder = bind_type.decoder();
+                quote! {
+                    let #name = #decoder?;
+                }
+            })
+            .collect();
+
+        quote! {
+            #hidden::RouteMuncher {
+                regex: #regex,
+                munchers: &[#(&#munchers,)*],
+                ctor: &|mut args| {
+                    #decode_args
+                    Some(#pattern)
+                }
             }
+        }
+    });
 
-            fn not_found_route() -> ::std::option::Option<Self> {
-                #not_found_route
+    let match_arms = variants.iter().enumerate().map(|(variant_index, variant)| {
+        let pattern = &variant.pattern;
+        let encode_args: TokenStream = variant
+            .munchers
+            .iter()
+            .flat_map(|m| &m.binds)
+            .map(|(index, bind_type)| {
+                let name = format_ident!("arg{}", index);
+                bind_type.encoder(&name)
+            })
+            .collect();
+        quote! {
+            #pattern => {
+                let mut args = #hidden::Args::empty();
+                #encode_args
+                (#variant_index, args)
             }
+        }
+    });
 
-            fn recognize(pathname: &str) -> ::std::option::Option<Self> {
-                ::std::thread_local! {
-                    static ROUTER: ::yew_router::__macro::Router = ::yew_router::__macro::build_router::<#ident>();
+    quote! {
+        #[automatically_derived]
+        impl #hidden::DerivedRoutable for #ident {
+            const VARIANTS: &'static [#hidden::RouteMuncher<Self>] = &[
+                #(#variants_arr,)*
+            ];
+            fn to_args(&self) -> (usize, #hidden::Args) {
+                match self {
+                    #(#match_arms,)*
                 }
-                ROUTER.with(|router| ::yew_router::__macro::recognize_with_router(router, pathname))
             }
         }
     }
diff --git a/packages/yew-router/Cargo.toml b/packages/yew-router/Cargo.toml
index 24a0d228211..39f1cb413e0 100644
--- a/packages/yew-router/Cargo.toml
+++ b/packages/yew-router/Cargo.toml
@@ -11,16 +11,18 @@ description = "A router implementation for the Yew framework"
 repository = "https://github.com/yewstack/yew"
 
 [dependencies]
-yew = { path = "../yew", default-features= false }
+yew = { path = "../yew", default-features = false }
 yew-router-macro = { path = "../yew-router-macro" }
+yew-functional = { path = "../yew-functional" }
 
-wasm-bindgen = "0.2"
+serde = "1.0.126"
+wasm-bindgen = { version = "0.2", features = ["serde-serialize"] }
 js-sys = "0.3"
 weblog = "0.3.0"
 gloo = "0.2.1"
 route-recognizer = "0.3.0"
-serde = "1.0"
-serde_urlencoded = "0.7"
+regex = "1.5.4"
+percent-encoding = "2.1.0"
 
 [dependencies.web-sys]
 version = "0.3"
@@ -38,11 +40,8 @@ features = [
 
 [dev-dependencies]
 wasm-bindgen-test = "0.3"
-yew-functional = { path = "../yew-functional" }
 serde = { version = "1.0", features = ["derive"] }
 
 [dev-dependencies.web-sys]
 version = "0.3"
-features = [
-    "HtmlHeadElement",
-]
+features = ["HtmlHeadElement"]
diff --git a/packages/yew-router/src/agents.rs b/packages/yew-router/src/agents.rs
new file mode 100644
index 00000000000..c4813b92f60
--- /dev/null
+++ b/packages/yew-router/src/agents.rs
@@ -0,0 +1,2 @@
+pub mod history;
+pub mod router;
diff --git a/packages/yew-router/src/agents/history.rs b/packages/yew-router/src/agents/history.rs
new file mode 100644
index 00000000000..1b83a382078
--- /dev/null
+++ b/packages/yew-router/src/agents/history.rs
@@ -0,0 +1,220 @@
+use std::collections::HashSet;
+use std::rc::Rc;
+
+use crate::utils::base_url;
+use wasm_bindgen::prelude::Closure;
+use wasm_bindgen::{JsCast, JsValue};
+use web_sys::EventTarget;
+use yew::utils::window;
+use yew::worker::{Agent, AgentLink, Bridged, Context, HandlerId};
+use yew::Callback;
+
+#[derive(Debug, Clone, PartialEq)]
+pub struct Route {
+    pub(crate) path: String,
+    pub(crate) query: String,
+    pub(crate) hash: String,
+    pub(crate) state: JsValue,
+}
+
+impl Default for Route {
+    fn default() -> Self {
+        Self {
+            path: Default::default(),
+            query: Default::default(),
+            hash: Default::default(),
+            state: JsValue::UNDEFINED,
+        }
+    }
+}
+
+impl Route {
+    pub fn new(path: impl Into<String>) -> Self {
+        Self {
+            path: path.into(),
+            query: String::new(),
+            hash: String::new(),
+            state: JsValue::null(),
+        }
+    }
+    pub fn with_state(mut self, state: JsValue) -> Self {
+        self.state = state;
+        self
+    }
+    pub fn with_query(mut self, query: impl Into<String>) -> Self {
+        self.query = query.into();
+        self
+    }
+    pub fn with_hash(mut self, hash: impl Into<String>) -> Self {
+        self.hash = hash.into();
+        self
+    }
+    pub fn path(&self) -> &str {
+        &self.path
+    }
+    pub fn query(&self) -> &str {
+        &self.query
+    }
+    pub fn hash(&self) -> &str {
+        &self.hash
+    }
+    pub fn state(&self) -> &JsValue {
+        &self.state
+    }
+    pub fn url(&self) -> String {
+        format!("{}{}{}", self.path, self.query, self.hash)
+    }
+    fn apply_base(&mut self) {
+        if let Some(base_url) = base_url() {
+            if self.path.starts_with("/") {
+                if self.path == "/" {
+                    self.path = base_url;
+                } else {
+                    self.path = format!("{}{}", base_url, self.path);
+                }
+            }
+        }
+    }
+    fn unapply_base(&mut self) {
+        if let Some(base_url) = base_url() {
+            if let Some(path) = self.path.strip_prefix(&base_url) {
+                if path.starts_with("/") {
+                    self.path = path.into();
+                } else if path.is_empty() {
+                    self.path = "/".into();
+                }
+            }
+        }
+    }
+}
+
+#[derive(Debug)]
+pub enum HistoryAction {
+    Push(Route),
+    Replace(Route),
+    Forward,
+    Back,
+    Go(i32),
+}
+
+/// Agent to interface with the history API.
+#[derive(Debug)]
+pub struct HistoryAgent {
+    link: AgentLink<Self>,
+    last_route: Rc<Route>,
+    cb: Closure<dyn Fn()>,
+    subscribers: HashSet<HandlerId>,
+}
+
+impl Agent for HistoryAgent {
+    type Reach = Context<Self>;
+
+    type Message = ();
+
+    type Input = HistoryAction;
+
+    type Output = Rc<Route>;
+
+    fn create(link: AgentLink<Self>) -> Self {
+        let last_route = Rc::new(Self::current());
+
+        let link2 = link.clone();
+        let cb: Closure<dyn Fn()> = Closure::wrap(Box::new(move || link2.send_message(())));
+
+        let et: EventTarget = window().into();
+        et.add_event_listener_with_callback("popstate", cb.as_ref().unchecked_ref())
+            .expect("add popstate listener");
+        et.add_event_listener_with_callback("hashchange", cb.as_ref().unchecked_ref())
+            .expect("add hashchange listener");
+
+        Self {
+            link,
+            last_route,
+            cb,
+            subscribers: HashSet::new(),
+        }
+    }
+
+    fn update(&mut self, _msg: ()) {
+        let route = Rc::new(Self::current());
+        if route != self.last_route {
+            for &id in &self.subscribers {
+                self.link.respond(id, route.clone())
+            }
+        }
+    }
+
+    fn handle_input(&mut self, msg: HistoryAction, _id: yew::worker::HandlerId) {
+        let history = window().history().expect("no history");
+        match msg {
+            HistoryAction::Push(mut route) => {
+                route.apply_base();
+                history
+                    .push_state_with_url(&route.state, "", Some(&route.url()))
+                    .expect("push history");
+            }
+            HistoryAction::Replace(mut route) => {
+                route.apply_base();
+                history
+                    .replace_state_with_url(&route.state, "", Some(&route.url()))
+                    .expect("replace history");
+            }
+            HistoryAction::Back => history.back().expect("back history"),
+            HistoryAction::Forward => history.forward().expect("forward history"),
+            HistoryAction::Go(index) => history.go_with_delta(index).expect("go history"),
+        }
+
+        self.update(());
+    }
+
+    fn destroy(&mut self) {
+        let et: EventTarget = window().into();
+        et.remove_event_listener_with_callback("hashchange", self.cb.as_ref().unchecked_ref())
+            .expect("remove hashchange listener");
+        et.remove_event_listener_with_callback("popstate", self.cb.as_ref().unchecked_ref())
+            .expect("remove popstate listener");
+    }
+
+    fn connected(&mut self, id: HandlerId) {
+        self.subscribers.insert(id);
+    }
+
+    fn disconnected(&mut self, id: HandlerId) {
+        self.subscribers.remove(&id);
+    }
+}
+
+impl HistoryAgent {
+    pub fn push(route: Route) {
+        Self::bridge(Callback::noop()).send(HistoryAction::Push(route));
+    }
+    pub fn replace(route: Route) {
+        Self::bridge(Callback::noop()).send(HistoryAction::Replace(route));
+    }
+    pub fn forward() {
+        Self::bridge(Callback::noop()).send(HistoryAction::Forward);
+    }
+    pub fn back() {
+        Self::bridge(Callback::noop()).send(HistoryAction::Back);
+    }
+    pub fn go(index: i32) {
+        Self::bridge(Callback::noop()).send(HistoryAction::Go(index));
+    }
+    pub fn current() -> Route {
+        let window = window();
+        let history = window.history().expect("no history");
+        let location = window.location();
+        let path = location.pathname().expect("no pathname");
+        let query = location.search().expect("no pathname");
+        let hash = location.hash().expect("no pathname");
+        let state = history.state().expect("no state");
+        let mut res = Route {
+            path,
+            query,
+            hash,
+            state,
+        };
+        res.unapply_base();
+        res
+    }
+}
diff --git a/packages/yew-router/src/agents/router.rs b/packages/yew-router/src/agents/router.rs
new file mode 100644
index 00000000000..e7ab20f094d
--- /dev/null
+++ b/packages/yew-router/src/agents/router.rs
@@ -0,0 +1,92 @@
+use std::collections::HashSet;
+use std::rc::Rc;
+
+use crate::Routable;
+use yew::worker::{Agent, AgentLink, Bridged, Context, HandlerId};
+use yew::Bridge;
+
+use super::history::{HistoryAction, HistoryAgent, Route};
+
+#[derive(Debug, Clone)]
+#[non_exhaustive]
+pub enum RouterAction<T: Routable> {
+    Push(T),
+    Replace(T),
+}
+
+impl<T: Routable> RouterAction<T> {
+    pub fn map<U: Routable>(self, f: impl FnOnce(T) -> U) -> RouterAction<U> {
+        match self {
+            Self::Push(routable) => RouterAction::Push(f(routable)),
+            Self::Replace(routable) => RouterAction::Replace(f(routable)),
+        }
+    }
+}
+
+/// Specializes the history API for a particular `Routable` type
+pub(crate) struct RouterAgent<T: Routable> {
+    link: AgentLink<Self>,
+    history: Box<dyn Bridge<HistoryAgent>>,
+    subscribers: HashSet<HandlerId>,
+}
+
+impl<T: Routable> Agent for RouterAgent<T> {
+    type Reach = Context<Self>;
+    type Message = Rc<Route>;
+    type Input = RouterAction<T>;
+    type Output = Rc<T>;
+
+    fn create(link: AgentLink<Self>) -> Self {
+        let history = HistoryAgent::bridge(link.callback(|x| x));
+
+        Self {
+            link,
+            history,
+            subscribers: HashSet::new(),
+        }
+    }
+
+    fn update(&mut self, msg: Rc<Route>) {
+        match T::from_route(&msg) {
+            Ok(routable) => {
+                let routable = Rc::new(routable);
+                for &id in &self.subscribers {
+                    self.link.respond(id, routable.clone())
+                }
+            }
+            Err(routable) => {
+                // Redirect to error route
+                self.history
+                    .send(HistoryAction::Replace(routable.to_route()))
+            }
+        }
+    }
+
+    fn handle_input(&mut self, msg: RouterAction<T>, _id: yew::worker::HandlerId) {
+        match msg {
+            RouterAction::Push(routable) => {
+                self.history.send(HistoryAction::Push(routable.to_route()))
+            }
+            RouterAction::Replace(routable) => {
+                self.history.send(HistoryAction::Push(routable.to_route()))
+            }
+        }
+    }
+
+    fn connected(&mut self, id: HandlerId) {
+        self.subscribers.insert(id);
+    }
+
+    fn disconnected(&mut self, id: HandlerId) {
+        self.subscribers.remove(&id);
+    }
+}
+
+impl<T: Routable> RouterAgent<T> {
+    pub(crate) fn current() -> T {
+        match T::from_route(&HistoryAgent::current()) {
+            Ok(routable) => routable,
+            Err(routable) => routable,
+        }
+    }
+}
diff --git a/packages/yew-router/src/components/link.rs b/packages/yew-router/src/components/link.rs
index a8caae18503..5a8deb23efa 100644
--- a/packages/yew-router/src/components/link.rs
+++ b/packages/yew-router/src/components/link.rs
@@ -1,6 +1,10 @@
-use crate::{service, Routable};
+use crate::agents::router::RouterAction;
+use crate::router::use_router;
+use crate::Routable;
 use yew::prelude::*;
 
+use yew_functional::function_component;
+
 /// Props for [`Link`]
 #[derive(Properties, Clone, PartialEq)]
 pub struct LinkProps<R: Routable + Clone> {
@@ -12,41 +16,15 @@ pub struct LinkProps<R: Routable + Clone> {
     pub children: Children,
 }
 
-/// A wrapper around `<a>` tag to be used with [`Router`](crate::Router)
-pub struct Link<R: Routable + Clone + PartialEq + 'static> {
-    link: ComponentLink<Self>,
-    props: LinkProps<R>,
-}
-
-pub enum Msg {
-    OnClick,
-}
-
-impl<R: Routable + Clone + PartialEq + 'static> Component for Link<R> {
-    type Message = Msg;
-    type Properties = LinkProps<R>;
-
-    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
-        Self { link, props }
-    }
-
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
-        match msg {
-            Msg::OnClick => {
-                service::push_route(self.props.route.clone());
-                false
-            }
-        }
-    }
-
-    fn change(&mut self, mut props: Self::Properties) -> ShouldRender {
-        std::mem::swap(&mut self.props, &mut props);
-        props != self.props
-    }
-
-    fn view(&self) -> Html {
-        html! {
-            <a class=self.props.classes.clone() onclick=self.link.callback(|_| Msg::OnClick)>{ self.props.children.clone() }</a>
-        }
+#[function_component(Link)]
+pub fn link<R>(props: &LinkProps<R>) -> Html
+where
+    R: Routable + Clone + PartialEq + 'static,
+{
+    let router = use_router::<R>();
+    let route = props.route.clone();
+    let callback = router.dispatcher(move |_| Some(RouterAction::Push(route.clone())));
+    html! {
+        <a class=props.classes.clone() onclick=callback>{ props.children.clone() }</a>
     }
 }
diff --git a/packages/yew-router/src/context.rs b/packages/yew-router/src/context.rs
new file mode 100644
index 00000000000..4ff13b417d8
--- /dev/null
+++ b/packages/yew-router/src/context.rs
@@ -0,0 +1,12 @@
+use std::rc::Rc;
+
+use yew::Callback;
+
+use crate::agents::router::RouterAction;
+use crate::Routable;
+
+#[derive(Debug, PartialEq)]
+pub struct RoutingContext<T: Routable> {
+    pub(crate) route: Rc<T>,
+    pub(crate) onroute: Callback<RouterAction<T>>,
+}
diff --git a/packages/yew-router/src/hidden.rs b/packages/yew-router/src/hidden.rs
new file mode 100644
index 00000000000..d186767aeab
--- /dev/null
+++ b/packages/yew-router/src/hidden.rs
@@ -0,0 +1,440 @@
+use std::any::{Any, TypeId};
+use std::borrow::Cow;
+use std::cell::RefCell;
+use std::collections::HashMap;
+use std::convert::{TryFrom, TryInto};
+use std::fmt::Display;
+use std::mem;
+use std::str::FromStr;
+
+use js_sys::Array;
+use percent_encoding::{percent_decode_str, percent_encode, NON_ALPHANUMERIC};
+use regex::RegexSet;
+use serde::de::DeserializeOwned;
+use serde::Serialize;
+use wasm_bindgen::{JsCast, JsValue};
+
+use crate::agents::history::Route;
+pub use crate::Routable;
+
+/// This trait is implemented by the derive macro. There is a blanket implementation of
+/// `Routeable` for all `DerivedRoutable`.
+pub trait DerivedRoutable: PartialEq + Any + Default {
+    const VARIANTS: &'static [RouteMuncher<Self>];
+
+    fn to_args(&self) -> (usize, Args);
+}
+
+/// Lazily builds and caches a `RegexSet` keyed on the TypeId of the `DerivedRoutable`.
+fn cached_regex_set<T: DerivedRoutable>() -> &'static RegexSet {
+    thread_local! {
+        static REGEX_CACHE: RefCell<HashMap<TypeId, &'static RegexSet>> = RefCell::new(HashMap::new());
+    }
+
+    // In the fast path, we simply lookup the TypeId in the map.
+    REGEX_CACHE.with(|cache| {
+        *cache
+            .borrow_mut()
+            .entry(TypeId::of::<T>())
+            .or_insert_with(|| {
+                // In the slow path we build a `RegexSet` from all the individual variant regexes. Leaking
+                // this `RegexSet` is fine, because the total number of distinct `DerivedRoutable` types is
+                // fixed at compile time.
+                Box::leak(Box::new(
+                    RegexSet::new(T::VARIANTS.iter().map(|v| v.regex))
+                        .expect("Invalid routing regex"),
+                ))
+            })
+    })
+}
+
+/// Blanket implementation of `Routable` for `DerivedRoutable`.
+impl<T: DerivedRoutable> Routable for T {
+    fn from_route(route: &Route) -> Result<Self, Self>
+    where
+        Self: Sized,
+    {
+        // Use a `RegexSet` to rapidly narrow the search to a small number of
+        // candidate routes.
+        let regex_set = cached_regex_set::<T>();
+        for candidate in regex_set.matches(&route.path) {
+            // Try each route in turn. `RegexSet` guarantees iteration order to
+            // match the original array.
+            let variant = &T::VARIANTS[candidate];
+            if let Some(res) = variant.from_route(route) {
+                return Ok(res);
+            }
+        }
+        Err(T::default())
+    }
+
+    fn to_route(&self) -> Route {
+        let (index, args) = self.to_args();
+        let variant = &T::VARIANTS[index];
+        variant.reconstitute(args)
+    }
+}
+
+#[derive(Debug, Clone)]
+pub enum Arg {
+    Empty,
+    String(String),
+    Opaque(JsValue),
+}
+
+impl From<String> for Arg {
+    fn from(s: String) -> Self {
+        Arg::String(s)
+    }
+}
+
+impl From<&str> for Arg {
+    fn from(s: &str) -> Self {
+        Arg::String(s.into())
+    }
+}
+
+impl From<JsValue> for Arg {
+    fn from(v: JsValue) -> Self {
+        if v.is_undefined() {
+            Arg::Empty
+        } else {
+            Arg::Opaque(v)
+        }
+    }
+}
+
+impl TryFrom<Arg> for String {
+    type Error = ();
+
+    fn try_from(value: Arg) -> Result<Self, Self::Error> {
+        if let Arg::String(s) = value {
+            Ok(s)
+        } else {
+            Err(())
+        }
+    }
+}
+
+impl TryFrom<Arg> for JsValue {
+    type Error = ();
+
+    fn try_from(value: Arg) -> Result<Self, Self::Error> {
+        if let Arg::Opaque(v) = value {
+            Ok(v)
+        } else {
+            Err(())
+        }
+    }
+}
+
+#[derive(Debug)]
+pub struct Args {
+    args: Vec<Arg>,
+    route: Route,
+}
+
+impl Args {
+    pub fn new(route: Route) -> Self {
+        Self {
+            route,
+            args: Vec::new(),
+        }
+    }
+    pub fn empty() -> Self {
+        Self::new(Route::new("/"))
+    }
+    pub fn push<T: Into<Arg>>(&mut self, arg: T) {
+        self.args.push(arg.into());
+    }
+    pub fn pop<T>(&mut self) -> Option<T>
+    where
+        Arg: TryInto<T>,
+    {
+        self.args.pop().expect("No argument to pop").try_into().ok()
+    }
+    pub fn push_serde<T: Serialize>(&mut self, arg: &T) {
+        self.push(JsValue::from_serde(arg).expect("Argument to serialize"));
+    }
+    pub fn pop_serde<T: DeserializeOwned>(&mut self) -> Option<T> {
+        self.pop::<JsValue>()?.into_serde().ok()
+    }
+    pub fn push_str<T: Display>(&mut self, arg: &T) {
+        self.push(arg.to_string());
+    }
+    pub fn pop_str<T: FromStr>(&mut self) -> Option<T> {
+        self.pop::<String>()?.parse().ok()
+    }
+    pub fn take_route(&mut self) -> Route {
+        mem::replace(&mut self.route, Default::default())
+    }
+    pub fn store_route(&mut self, route: Route) {
+        self.route = route;
+    }
+}
+
+/// An instance of this type is constructed for each variant by the
+/// derive macro.
+pub struct RouteMuncher<T: DerivedRoutable> {
+    pub regex: &'static str,
+    pub munchers: &'static [&'static dyn Muncher],
+    pub ctor: &'static dyn Fn(Args) -> Option<T>,
+}
+
+impl<T: DerivedRoutable> RouteMuncher<T> {
+    /// Extracts a list of arguments from the `Route` using the configured
+    /// munchers.
+    fn munch(&self, route: &Route) -> Option<Args> {
+        let mut args = Args::new(route.clone());
+        for muncher in self.munchers {
+            if !muncher.munch(&mut args) {
+                return None;
+            }
+        }
+        Some(args)
+    }
+    /// Attempts to construct this variant from the provided `Route`.
+    fn from_route(&self, route: &Route) -> Option<T> {
+        (self.ctor)(self.munch(route)?)
+    }
+    /// Builds a route from a list of arguments.
+    fn reconstitute(&self, mut args: Args) -> Route {
+        for muncher in self.munchers.iter().rev() {
+            muncher.reconstitute(&mut args);
+        }
+        args.take_route()
+    }
+}
+
+/// This trait is implemented for each possible way arguments can be
+/// extracted from a route.
+pub trait Muncher {
+    fn munch(&self, args: &mut Args) -> bool;
+    fn reconstitute(&self, args: &mut Args);
+}
+
+// Configuration for the `PathSegmentMuncher`
+pub enum PathPart {
+    Match(&'static str),
+    ExtractOne,
+    ExtractAll,
+}
+
+/// A muncher which matches and/or extracts path segments of a URL.
+pub struct PathSegmentMuncher {
+    pub parts: &'static [PathPart],
+}
+
+impl Muncher for PathSegmentMuncher {
+    fn munch(&self, args: &mut Args) -> bool {
+        fn remove_segment<'a>(path: &mut &'a str) -> Option<&'a str> {
+            *path = &path[1..];
+            let i = path.find('/').unwrap_or(path.len());
+            if i > 0 {
+                let res = &path[0..i];
+                if i < path.len() {
+                    *path = &path[i..];
+                } else {
+                    *path = "/"
+                }
+                Some(res)
+            } else {
+                None
+            }
+        }
+
+        let mut route = args.take_route();
+        let mut path = route.path.as_str();
+
+        if path.is_empty() {
+            return false;
+        }
+
+        for part in self.parts {
+            match part {
+                PathPart::Match(literal) => {
+                    if remove_segment(&mut path) != Some(literal) {
+                        return false;
+                    }
+                }
+                PathPart::ExtractOne => {
+                    if let Some(segment) = remove_segment(&mut path) {
+                        args.push(segment);
+                    } else {
+                        return false;
+                    }
+                }
+                PathPart::ExtractAll => {
+                    args.push(path);
+                    path = "";
+                }
+            }
+        }
+        route.path = if path.is_empty() {
+            "/".into()
+        } else {
+            path.into()
+        };
+        args.store_route(route);
+
+        true
+    }
+
+    fn reconstitute(&self, args: &mut Args) {
+        let mut route = args.take_route();
+        let mut rev_path_acc = vec![if route.path == "/" {
+            Cow::Borrowed("")
+        } else {
+            Cow::Owned(route.path)
+        }];
+
+        for part in self.parts.iter().rev() {
+            rev_path_acc.push(match *part {
+                PathPart::Match(literal) => literal.into(),
+                PathPart::ExtractOne => Cow::Owned(args.pop().expect("Missing path parameter")),
+                PathPart::ExtractAll => Cow::Owned(args.pop().expect("Missing path parameter")),
+            });
+            rev_path_acc.push(Cow::Borrowed("/"));
+        }
+
+        rev_path_acc.reverse();
+        route.path = rev_path_acc.concat();
+        args.store_route(route);
+    }
+}
+
+fn munch_named_args(prefix: &str, names: &[&str], value: &mut String, args: &mut Args) {
+    if names.is_empty() {
+        return;
+    }
+    let mut arr = vec![Arg::Empty; names.len()];
+    if let Some(remainder) = value.strip_prefix(prefix) {
+        let mut unused_parts = Vec::new();
+        for part in remainder.split('&') {
+            let mut it = part.splitn(2, '=');
+            if let (Some(lhs), Some(rhs)) = (it.next(), it.next()) {
+                if let Some(i) = names.iter().position(|&name| name == lhs) {
+                    let rhs = rhs.replace('+', " ");
+                    let rhs = percent_decode_str(rhs.as_str()).decode_utf8_lossy();
+                    arr[i] = rhs.as_ref().into();
+                    continue;
+                }
+            }
+            unused_parts.push(part);
+        }
+        if unused_parts.is_empty() {
+            value.clear();
+        } else {
+            *value = format!("{}{}", prefix, unused_parts.join("&"));
+        }
+    }
+    for item in arr {
+        args.push(item);
+    }
+}
+
+fn reconstitute_named_args(prefix: &str, names: &[&str], value: &mut String, args: &mut Args) {
+    if names.is_empty() {
+        return;
+    }
+    let existing = value.strip_prefix(prefix).unwrap_or(&value);
+
+    let mut rev_arg_acc = if existing.is_empty() {
+        vec![]
+    } else {
+        vec![Cow::Borrowed(existing)]
+    };
+    for &name in names.iter().rev() {
+        if let Some(value) = args.pop::<String>() {
+            if !rev_arg_acc.is_empty() {
+                rev_arg_acc.push("&".into());
+            }
+
+            let rhs: Cow<str> = percent_encode(value.as_bytes(), NON_ALPHANUMERIC).into();
+            rev_arg_acc.push(rhs.replace("%20", "+").into());
+            rev_arg_acc.push("=".into());
+            rev_arg_acc.push(name.into());
+        }
+    }
+    if !rev_arg_acc.is_empty() {
+        rev_arg_acc.push(prefix.into());
+    }
+    rev_arg_acc.reverse();
+    *value = rev_arg_acc.concat();
+}
+
+/// A muncher which extracts query arguments from a URL by name.
+pub struct QueryArgMuncher {
+    pub names: &'static [&'static str],
+}
+
+impl Muncher for QueryArgMuncher {
+    fn munch(&self, args: &mut Args) -> bool {
+        let mut route = args.take_route();
+        munch_named_args("?", self.names, &mut route.query, args);
+        args.store_route(route);
+        true
+    }
+
+    fn reconstitute(&self, args: &mut Args) {
+        let mut route = args.take_route();
+        reconstitute_named_args("?", self.names, &mut route.query, args);
+        args.store_route(route);
+    }
+}
+
+/// A muncher which extracts URL-encoded hash arguments by name.
+pub struct HashArgMuncher {
+    pub names: &'static [&'static str],
+}
+
+impl Muncher for HashArgMuncher {
+    fn munch(&self, args: &mut Args) -> bool {
+        let mut route = args.take_route();
+        munch_named_args("#", self.names, &mut route.query, args);
+        args.store_route(route);
+        true
+    }
+
+    fn reconstitute(&self, args: &mut Args) {
+        let mut route = args.take_route();
+        reconstitute_named_args("#", self.names, &mut route.query, args);
+        args.store_route(route);
+    }
+}
+
+/// A muncher which extracts values from a state array stored via the history API.
+pub struct PopStateMuncher {
+    pub count: usize,
+}
+
+impl Muncher for PopStateMuncher {
+    fn munch(&self, args: &mut Args) -> bool {
+        let mut route = args.take_route();
+        for _ in 0..self.count {
+            if let Some(arr) = route.state.dyn_ref::<Array>() {
+                args.push(arr.get(0));
+                route.state = arr.slice(1, arr.length()).into();
+            } else {
+                args.push(mem::replace(&mut route.state, JsValue::UNDEFINED));
+            }
+        }
+        args.store_route(route);
+        true
+    }
+
+    fn reconstitute(&self, args: &mut Args) {
+        let mut route = args.take_route();
+        for _ in 0..self.count {
+            let new_item = args.pop().unwrap_or(JsValue::UNDEFINED);
+            if let Some(arr) = route.state.dyn_ref::<Array>() {
+                route.state = Array::of1(&new_item).concat(arr).into();
+            } else if route.state.is_undefined() {
+                route.state = Array::of1(&new_item).into();
+            } else {
+                route.state = Array::of2(&new_item, &route.state).into();
+            }
+        }
+        args.store_route(route);
+    }
+}
diff --git a/packages/yew-router/src/lib.rs b/packages/yew-router/src/lib.rs
index c14401ff46a..40fc933d0f1 100644
--- a/packages/yew-router/src/lib.rs
+++ b/packages/yew-router/src/lib.rs
@@ -53,19 +53,20 @@
 //! not expose or make use of it. It is instead recommended that a state management library like
 //! [yewdux](https://github.com/intendednull/yewdux) be used.
 
-#[doc(hidden)]
-#[path = "macro_helpers.rs"]
-pub mod __macro;
+mod agents;
 pub mod components;
+mod context;
 mod routable;
 pub mod router;
-mod service;
 pub mod utils;
 
-pub use service::*;
+#[doc(hidden)]
+pub mod hidden;
 
+pub use crate::agents::router::RouterAction;
+pub use agents::history::HistoryAgent;
 pub use routable::Routable;
-pub use router::{RenderFn, Router};
+pub use router::{use_router, Router};
 
 pub mod prelude {
     //! Prelude module to be imported when working with `yew-router`.
@@ -75,5 +76,5 @@ pub mod prelude {
     pub use crate::components::Link;
     #[doc(no_inline)]
     pub use crate::Routable;
-    pub use crate::Router;
+    pub use crate::{use_router, Router, RouterAction};
 }
diff --git a/packages/yew-router/src/macro_helpers.rs b/packages/yew-router/src/macro_helpers.rs
deleted file mode 100644
index a0380590147..00000000000
--- a/packages/yew-router/src/macro_helpers.rs
+++ /dev/null
@@ -1,39 +0,0 @@
-use crate::utils::{base_url, build_path_with_base, strip_slash_suffix};
-use crate::Routable;
-
-// re-export Router because the macro needs to access it
-pub type Router = route_recognizer::Router<String>;
-
-/// Build a `route_recognizer::Router` from a `Routable` type.
-pub fn build_router<R: Routable>() -> Router {
-    let base = base_url();
-    let mut router = Router::new();
-    R::routes().iter().for_each(|path| {
-        match &base {
-            Some(base) if base != "/" => {
-                let route = build_path_with_base(path);
-                let mut dest = route.replace(base, "");
-                if dest.is_empty() {
-                    dest = "/".to_string();
-                }
-                router.add(&route, dest);
-            }
-            _ => {
-                router.add(&path, path.to_string());
-            }
-        };
-    });
-
-    router
-}
-
-/// Use a `route_recognizer::Router` to build the route of a `Routable`
-pub fn recognize_with_router<R: Routable>(router: &Router, pathname: &str) -> Option<R> {
-    let pathname = strip_slash_suffix(pathname);
-    let matched = router.recognize(pathname);
-
-    match matched {
-        Ok(matched) => R::from_path(matched.handler(), &matched.params().into_iter().collect()),
-        Err(_) => R::not_found_route(),
-    }
-}
diff --git a/packages/yew-router/src/routable.rs b/packages/yew-router/src/routable.rs
index e943db3b1b6..124c78675c4 100644
--- a/packages/yew-router/src/routable.rs
+++ b/packages/yew-router/src/routable.rs
@@ -1,4 +1,4 @@
-use std::collections::HashMap;
+use crate::agents::history::Route;
 
 pub use yew_router_macro::Routable;
 
@@ -8,19 +8,27 @@ pub use yew_router_macro::Routable;
 ///
 /// Use derive macro to implement it. Although it *is* possible to implement it manually,
 /// it is discouraged.
-pub trait Routable: Sized {
-    /// Converts path to an instance of the routes enum.
-    fn from_path(path: &str, params: &HashMap<&str, &str>) -> Option<Self>;
+pub trait Routable: PartialEq + 'static {
+    /// Converts path to an instance of the routes enum. If the conversion succeeds, the
+    /// returned variant corresponds to the route. If the conversion fails, a fallback variant
+    /// is returned, which the caller should redirect to.
+    fn from_route(route: &Route) -> Result<Self, Self>
+    where
+        Self: Sized;
 
-    /// Converts the route to a string that can passed to the history API.
-    fn to_path(&self) -> String;
-
-    /// Lists all the available routes
-    fn routes() -> Vec<&'static str>;
+    /// Converts an instance of the routes enum to a route that can passed to browser history API.
+    fn to_route(&self) -> Route;
+}
 
-    /// The route to redirect to on 404
-    fn not_found_route() -> Option<Self>;
+impl Routable for Route {
+    fn from_route(route: &Route) -> Result<Self, Self>
+    where
+        Self: Sized,
+    {
+        Ok(route.clone())
+    }
 
-    /// Match a route based on the path
-    fn recognize(pathname: &str) -> Option<Self>;
+    fn to_route(&self) -> Route {
+        self.clone()
+    }
 }
diff --git a/packages/yew-router/src/router.rs b/packages/yew-router/src/router.rs
index fcfb7d1440c..d18554a9342 100644
--- a/packages/yew-router/src/router.rs
+++ b/packages/yew-router/src/router.rs
@@ -1,125 +1,151 @@
 //! Router Component.
 
-use crate::{attach_route_listener, current_route, Routable, RouteListener};
+use std::cell::RefCell;
 use std::rc::Rc;
+
+use yew::context::ContextHandle;
+use yew::html::AnyScope;
 use yew::prelude::*;
+use yew_functional::{get_current_scope, use_hook};
 
-/// Wraps `Rc` around `Fn` so it can be passed as a prop.
-pub struct RenderFn<R>(Rc<dyn Fn(&R) -> Html>);
+use crate::agents::router::{RouterAction, RouterAgent};
+use crate::context::RoutingContext;
+use crate::Routable;
 
-impl<R> RenderFn<R> {
-    /// Creates a new [`RenderFn`]
-    ///
-    /// It is recommended that you use [`Router::render`] instead
-    pub fn new(value: impl Fn(&R) -> Html + 'static) -> Self {
-        Self(Rc::new(value))
-    }
-}
+pub struct Router<T: Routable>(Rc<InnerRouter<T>>);
 
-impl<T> Clone for RenderFn<T> {
+impl<T: Routable> Clone for Router<T> {
     fn clone(&self) -> Self {
-        Self(Rc::clone(&self.0))
+        Router(self.0.clone())
     }
 }
 
-impl<T> PartialEq for RenderFn<T> {
-    fn eq(&self, other: &Self) -> bool {
-        // https://github.com/rust-lang/rust-clippy/issues/6524
-        #[allow(clippy::vtable_address_comparisons)]
-        Rc::ptr_eq(&self.0, &other.0)
-    }
+enum InnerRouter<T: Routable> {
+    // Used when we're mounted inside a routing context
+    Context {
+        current: RefCell<Rc<RoutingContext<T>>>,
+        _handle: ContextHandle<Rc<RoutingContext<T>>>,
+    },
+    // Used when we're directly interacting with the router agent
+    Agent {
+        // Lazily initialize this to avoid unnecessary work
+        current: RefCell<Option<Rc<T>>>,
+        bridge: RefCell<Box<dyn Bridge<RouterAgent<T>>>>,
+    },
 }
 
-/// Props for [`Router`]
-#[derive(Properties)]
-pub struct RouterProps<R> {
-    /// Callback which returns [`Html`] to be rendered for the current route.
-    pub render: RenderFn<R>,
-}
+#[derive(Debug)]
+pub struct RouterUpdate<T: Routable>(InnerRouterUpdate<T>);
 
-impl<R> Clone for RouterProps<R> {
-    fn clone(&self) -> Self {
-        Self {
-            render: self.render.clone(),
-        }
-    }
+#[derive(Debug)]
+enum InnerRouterUpdate<T: Routable> {
+    // Used when we're mounted inside a routing context
+    Context(Rc<RoutingContext<T>>),
+    // Used when we're directly interacting with the router agent
+    Agent(Rc<T>),
 }
 
-impl<R> PartialEq for RouterProps<R> {
-    fn eq(&self, other: &Self) -> bool {
-        self.render.eq(&other.render)
+impl<T: Routable> Router<T> {
+    pub fn new(link: impl Into<AnyScope>, callback: Callback<RouterUpdate<T>>) -> Self {
+        let link = link.into();
+        Self(Rc::new(
+            if let Some((current, handle)) =
+                link.context(callback.reform(|ctx| RouterUpdate(InnerRouterUpdate::Context(ctx))))
+            {
+                InnerRouter::Context {
+                    current: RefCell::new(current),
+                    _handle: handle,
+                }
+            } else {
+                let current = RefCell::new(None);
+                let bridge = RefCell::new(RouterAgent::bridge(
+                    callback.reform(|routable| RouterUpdate(InnerRouterUpdate::Agent(routable))),
+                ));
+                InnerRouter::Agent { current, bridge }
+            },
+        ))
     }
-}
-
-#[doc(hidden)]
-pub enum Msg<R> {
-    UpdateRoute(Option<R>),
-}
-
-/// The router component.
-///
-/// When a route can't be matched, it looks for the route with `not_found` attribute.
-/// If such a route is provided, it redirects to the specified route.
-/// Otherwise `html! {}` is rendered and a message is logged to console
-/// stating that no route can be matched.
-/// See the [crate level document][crate] for more information.
-pub struct Router<R: Routable + 'static> {
-    props: RouterProps<R>,
-    #[allow(dead_code)] // only exists to drop listener on component drop
-    route_listener: RouteListener,
-    route: Option<R>,
-}
-
-impl<R> Component for Router<R>
-where
-    R: Routable + 'static,
-{
-    type Message = Msg<R>;
-    type Properties = RouterProps<R>;
-
-    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
-        let route_listener = attach_route_listener(link.callback(Msg::UpdateRoute));
-
-        Self {
-            props,
-            route_listener,
-            route: current_route(),
+    pub fn update(&self, update: RouterUpdate<T>) {
+        match (&*self.0, update.0) {
+            (InnerRouter::Agent { current, .. }, InnerRouterUpdate::Agent(routable)) => {
+                *current.borrow_mut() = Some(routable);
+            }
+            (InnerRouter::Context { current, .. }, InnerRouterUpdate::Context(ctx)) => {
+                *current.borrow_mut() = ctx;
+            }
+            _ => unreachable!(),
         }
     }
-
-    fn update(&mut self, msg: Self::Message) -> bool {
-        match msg {
-            Msg::UpdateRoute(route) => {
-                self.route = route;
-                true
+    pub fn route(&self) -> Rc<T> {
+        match &*self.0 {
+            InnerRouter::Agent { current, .. } => {
+                let mut current = current.borrow_mut();
+                if let Some(route) = &*current {
+                    route.clone()
+                } else {
+                    let route = Rc::new(RouterAgent::<T>::current());
+                    *current = Some(route.clone());
+                    route
+                }
             }
+            InnerRouter::Context { current, .. } => current.borrow().route.clone(),
         }
     }
-
-    fn change(&mut self, mut props: Self::Properties) -> bool {
-        std::mem::swap(&mut self.props, &mut props);
-        props != self.props
+    pub fn dispatch(&self, action: RouterAction<T>) {
+        match &*self.0 {
+            InnerRouter::Agent { bridge, .. } => bridge.borrow_mut().send(action),
+            InnerRouter::Context { current, .. } => current.borrow().onroute.emit(action),
+        }
     }
-
-    fn view(&self) -> Html {
-        match &self.route {
-            Some(route) => (self.props.render.0)(route),
-            None => {
-                weblog::console_log!("no route matched");
-                html! {}
+    pub fn dispatcher<U>(
+        &self,
+        action_fn: impl Fn(U) -> Option<RouterAction<T>> + 'static,
+    ) -> Callback<U> {
+        let router: Router<T> = self.clone();
+        (move |args| {
+            if let Some(action) = action_fn(args) {
+                router.dispatch(action)
             }
-        }
+        })
+        .into()
+    }
+    pub fn push(&self, routable: T) {
+        self.dispatch(RouterAction::Push(routable));
+    }
+    pub fn replace(&self, routable: T) {
+        self.dispatch(RouterAction::Replace(routable));
     }
 }
 
-impl<R> Router<R>
-where
-    R: Routable + Clone + 'static,
-{
-    pub fn render<F>(func: F) -> RenderFn<R>
-    where
-        F: Fn(&R) -> Html + 'static,
-    {
-        RenderFn::new(func)
+pub fn use_router<T: Routable>() -> Router<T> {
+    struct UseRouterState<T2: Routable> {
+        router: Option<Router<T2>>,
     }
+
+    let scope = get_current_scope()
+        .expect("No current Scope. `use_router` can only be called inside function components");
+
+    use_hook(
+        move || UseRouterState { router: None },
+        |state: &mut UseRouterState<T>, updater| {
+            if state.router.is_none() {
+                let callback = move |update: RouterUpdate<T>| {
+                    updater.callback(|state: &mut UseRouterState<T>| {
+                        if let Some(router) = &state.router {
+                            router.update(update);
+                            true
+                        } else {
+                            false
+                        }
+                    });
+                };
+                state.router = Some(Router::new(scope, callback.into()))
+            }
+
+            state.router.clone().unwrap()
+        },
+        |state| {
+            state.router = None;
+        },
+    )
 }
diff --git a/packages/yew-router/src/service.rs b/packages/yew-router/src/service.rs
deleted file mode 100644
index 90fb9bb4973..00000000000
--- a/packages/yew-router/src/service.rs
+++ /dev/null
@@ -1,85 +0,0 @@
-use crate::utils::build_path_with_base;
-use crate::Routable;
-use gloo::events::EventListener;
-use serde::{Deserialize, Serialize};
-use wasm_bindgen::JsValue;
-use web_sys::Event;
-use yew::Callback;
-
-/// Navigate to a specific route.
-pub fn push_route(route: impl Routable) {
-    push_impl(route.to_path())
-}
-
-/// Navigate to a specific route with query parameters.
-///
-/// This should be used in cases where [`Link`](crate::prelude::Link) is insufficient.
-pub fn push_route_with_query<S>(
-    route: impl Routable,
-    query: S,
-) -> Result<(), serde_urlencoded::ser::Error>
-where
-    S: Serialize,
-{
-    let mut url = route.to_path();
-    let query = serde_urlencoded::to_string(query)?;
-    if !query.is_empty() {
-        url.push_str(&format!("?{}", query));
-    }
-
-    push_impl(url);
-
-    Ok(())
-}
-
-fn push_impl(url: String) {
-    let history = yew::utils::window().history().expect("no history");
-
-    let path = build_path_with_base(&url);
-    // using this little trick to avoid allocating `/` string
-    let mut path = path.as_str();
-    if path.is_empty() {
-        path = "/";
-    }
-    history
-        .push_state_with_url(&JsValue::NULL, "", Some(path))
-        .expect("push history");
-    let event = Event::new("popstate").unwrap();
-    yew::utils::window()
-        .dispatch_event(&event)
-        .expect("dispatch");
-}
-
-pub fn parse_query<T>() -> Result<T, serde_urlencoded::de::Error>
-where
-    T: for<'de> Deserialize<'de>,
-{
-    let query = yew::utils::document().location().unwrap().search().unwrap();
-    serde_urlencoded::from_str(query.strip_prefix("?").unwrap_or(""))
-}
-
-pub fn current_route<R: Routable>() -> Option<R> {
-    let pathname = yew::utils::window().location().pathname().unwrap();
-    R::recognize(&pathname)
-}
-
-/// Handle for the router's path event listener
-pub struct RouteListener {
-    // this exists so listener is dropped when handle is dropped
-    #[allow(dead_code)]
-    listener: EventListener,
-}
-
-/// Adds a listener which is called when the current route is changed.
-///
-/// The callback receives `Option<R>` so it can handle the error case itself.
-pub fn attach_route_listener<R>(callback: Callback<Option<R>>) -> RouteListener
-where
-    R: Routable + 'static,
-{
-    let listener = EventListener::new(&yew::utils::window(), "popstate", move |_| {
-        callback.emit(current_route())
-    });
-
-    RouteListener { listener }
-}
diff --git a/packages/yew-router/src/utils.rs b/packages/yew-router/src/utils.rs
index 8c647f79f37..004ba5f7ecf 100644
--- a/packages/yew-router/src/utils.rs
+++ b/packages/yew-router/src/utils.rs
@@ -1,10 +1,8 @@
-use wasm_bindgen::JsCast;
+use std::cell::RefCell;
 
-pub(crate) fn strip_slash_suffix(path: &str) -> &str {
-    path.strip_suffix("/").unwrap_or(&path)
-}
+use wasm_bindgen::JsCast;
 
-pub fn base_url() -> Option<String> {
+pub fn find_base_url() -> Option<String> {
     match yew::utils::document().query_selector("base[href]") {
         Ok(Some(base)) => {
             let base = base.unchecked_into::<web_sys::HtmlBaseElement>().href();
@@ -13,22 +11,32 @@ pub fn base_url() -> Option<String> {
             let base = url.pathname();
 
             let base = if base != "/" {
-                strip_slash_suffix(&base)
+                base.strip_suffix("/")
+                    .map(|it| it.to_string())
+                    .unwrap_or(base)
             } else {
                 return None;
             };
 
-            Some(base.to_string())
+            Some(base)
         }
         _ => None,
     }
 }
 
-pub fn build_path_with_base(to: &str) -> String {
-    let path = format!(
-        "{}{}",
-        base_url().as_deref().map(strip_slash_suffix).unwrap_or(""),
-        to
-    );
-    strip_slash_suffix(&path).to_string()
+pub fn base_url() -> Option<String> {
+    thread_local! {
+        static BASE_URL: RefCell<Option<Option<String>>> = RefCell::new(None);
+    }
+
+    BASE_URL.with(|maybe_base_url| {
+        let mut maybe_base_url = maybe_base_url.borrow_mut();
+        if let Some(base_url) = &*maybe_base_url {
+            base_url.clone()
+        } else {
+            let base_url = find_base_url();
+            *maybe_base_url = Some(base_url.clone());
+            base_url
+        }
+    })
 }
diff --git a/packages/yew-router/tests/parser.rs b/packages/yew-router/tests/parser.rs
index 048ac396d21..f923865368f 100644
--- a/packages/yew-router/tests/parser.rs
+++ b/packages/yew-router/tests/parser.rs
@@ -1,8 +1,5 @@
-use serde::Serialize;
-use std::collections::HashMap;
 use wasm_bindgen_test::wasm_bindgen_test as test;
 use yew::utils::*;
-use yew_router::parse_query;
 use yew_router::prelude::*;
 use yew_router::utils::*;
 
@@ -18,72 +15,27 @@ enum Routes {
     NotFound,
 }
 
-#[test]
-fn test_base_url() {
-    document().head().unwrap().set_inner_html(r#""#);
-
-    assert_eq!(base_url(), None);
-
-    document()
-        .head()
-        .unwrap()
-        .set_inner_html(r#"<base href="/base/">"#);
-    assert_eq!(base_url(), Some("/base".to_string()));
-
-    document()
-        .head()
-        .unwrap()
-        .set_inner_html(r#"<base href="/base">"#);
-    assert_eq!(base_url(), Some("/base".to_string()));
-}
-
-#[derive(Serialize, Clone)]
-struct QueryParams {
-    foo: String,
-    bar: u32,
+impl Default for Routes {
+    fn default() -> Self {
+        Self::NotFound
+    }
 }
 
 #[test]
-fn test_get_query_params() {
-    assert_eq!(
-        parse_query::<HashMap<String, String>>().unwrap(),
-        HashMap::new()
-    );
-
-    let query = QueryParams {
-        foo: "test".to_string(),
-        bar: 69,
-    };
-
-    yew_router::push_route_with_query(Routes::Home, query.clone()).unwrap();
-
-    let params: HashMap<String, String> = parse_query().unwrap();
-
-    assert_eq!(params, {
-        let mut map = HashMap::new();
-        map.insert("foo".to_string(), "test".to_string());
-        map.insert("bar".to_string(), "69".to_string());
-        map
-    });
-}
-
-#[test]
-fn test_build_base_url() {
+fn test_find_base_url() {
     document().head().unwrap().set_inner_html(r#""#);
 
-    assert_eq!(build_path_with_base("/posts"), "/posts");
+    assert_eq!(find_base_url(), None);
 
     document()
         .head()
         .unwrap()
-        .set_inner_html(r#"<base href="/router">"#);
-
-    assert_eq!(build_path_with_base("/posts/"), "/router/posts");
+        .set_inner_html(r#"<base href="/base/">"#);
+    assert_eq!(find_base_url(), Some("/base".to_string()));
 
     document()
         .head()
         .unwrap()
-        .set_inner_html(r#"<base href="/">"#);
-
-    assert_eq!(build_path_with_base("/posts"), "/posts");
+        .set_inner_html(r#"<base href="/base">"#);
+    assert_eq!(find_base_url(), Some("/base".to_string()));
 }
diff --git a/packages/yew-router/tests/router.rs b/packages/yew-router/tests/router.rs
index 07eb8843d28..b9811685287 100644
--- a/packages/yew-router/tests/router.rs
+++ b/packages/yew-router/tests/router.rs
@@ -1,4 +1,3 @@
-use serde::{Deserialize, Serialize};
 use wasm_bindgen_test::{wasm_bindgen_test as test, wasm_bindgen_test_configure};
 use yew::prelude::*;
 use yew_functional::function_component;
@@ -9,24 +8,30 @@ use utils::*;
 
 wasm_bindgen_test_configure!(run_in_browser);
 
-#[derive(Serialize, Deserialize)]
-struct Query {
-    foo: String,
-}
-
-#[derive(Debug, Clone, Copy, PartialEq, Routable)]
+#[derive(Debug, Clone, PartialEq, Routable)]
 enum Routes {
     #[at("/")]
     Home,
     #[at("/no/:id")]
-    No { id: u32 },
+    No {
+        id: u32,
+        #[bind(query_arg)]
+        foo: String,
+    },
     #[at("/404")]
     NotFound,
 }
 
+impl Default for Routes {
+    fn default() -> Self {
+        Self::NotFound
+    }
+}
+
 #[derive(Properties, PartialEq, Clone)]
 struct NoProps {
     id: u32,
+    foo: String,
 }
 
 #[function_component(No)]
@@ -36,39 +41,30 @@ fn no(props: &NoProps) -> Html {
     html! {
         <>
             <div id="result-params">{ route }</div>
-            <div id="result-query">{ yew_router::parse_query::<Query>().unwrap().foo }</div>
+            <div id="result-query">{ &props.foo }</div>
         </>
     }
 }
 
 #[function_component(Comp)]
 fn component() -> Html {
-    let switch = Router::render(|routes| {
-        let onclick = Callback::from(|_| {
-            yew_router::push_route_with_query(
-                Routes::No { id: 2 },
-                Query {
-                    foo: "bar".to_string(),
-                },
-            )
-            .unwrap();
-        });
-
-        match routes {
-            Routes::Home => html! {
-                <>
-                    <div id="result">{"Home"}</div>
-                    <a onclick=onclick>{"click me"}</a>
-                </>
-            },
-            Routes::No { id } => html! { <No id=id /> },
-            Routes::NotFound => html! { <div id="result">{"404"}</div> },
-        }
+    let router = use_router();
+    let onclick = router.dispatcher(|_| {
+        Some(RouterAction::Push(Routes::No {
+            id: 2,
+            foo: "bar".into(),
+        }))
     });
 
-    html! {
-        <Router<Routes> render=switch>
-        </Router<Routes>>
+    match &*router.route() {
+        Routes::Home => html! {
+            <>
+                <div id="result">{"Home"}</div>
+                <a onclick=onclick>{"click me"}</a>
+            </>
+        },
+        Routes::No { id, foo } => html! { <No id=id foo=foo /> },
+        Routes::NotFound => html! { <div id="result">{"404"}</div> },
     }
 }
 

From a1b747027289b7819950e3fc6e0c43a49e01ca1f Mon Sep 17 00:00:00 2001
From: Diggory Blake <diggsey@googlemail.com>
Date: Tue, 25 May 2021 23:32:05 +0100
Subject: [PATCH 2/3] Convert agents to services

---
 packages/yew-router/Cargo.toml                |   1 +
 packages/yew-router/src/agents/router.rs      |  92 ---------
 packages/yew-router/src/components/link.rs    |   2 +-
 packages/yew-router/src/context.rs            |   2 +-
 packages/yew-router/src/hidden.rs             |   6 +-
 packages/yew-router/src/lib.rs                |   6 +-
 packages/yew-router/src/routable.rs           |   2 +-
 packages/yew-router/src/router.rs             |  26 +--
 .../yew-router/src/{agents.rs => services.rs} |   0
 .../src/{agents => services}/history.rs       | 195 +++++++++++-------
 packages/yew-router/src/services/router.rs    | 167 +++++++++++++++
 11 files changed, 316 insertions(+), 183 deletions(-)
 delete mode 100644 packages/yew-router/src/agents/router.rs
 rename packages/yew-router/src/{agents.rs => services.rs} (100%)
 rename packages/yew-router/src/{agents => services}/history.rs (57%)
 create mode 100644 packages/yew-router/src/services/router.rs

diff --git a/packages/yew-router/Cargo.toml b/packages/yew-router/Cargo.toml
index 39f1cb413e0..d9b2f3577ae 100644
--- a/packages/yew-router/Cargo.toml
+++ b/packages/yew-router/Cargo.toml
@@ -23,6 +23,7 @@ gloo = "0.2.1"
 route-recognizer = "0.3.0"
 regex = "1.5.4"
 percent-encoding = "2.1.0"
+anymap = "0.12"
 
 [dependencies.web-sys]
 version = "0.3"
diff --git a/packages/yew-router/src/agents/router.rs b/packages/yew-router/src/agents/router.rs
deleted file mode 100644
index e7ab20f094d..00000000000
--- a/packages/yew-router/src/agents/router.rs
+++ /dev/null
@@ -1,92 +0,0 @@
-use std::collections::HashSet;
-use std::rc::Rc;
-
-use crate::Routable;
-use yew::worker::{Agent, AgentLink, Bridged, Context, HandlerId};
-use yew::Bridge;
-
-use super::history::{HistoryAction, HistoryAgent, Route};
-
-#[derive(Debug, Clone)]
-#[non_exhaustive]
-pub enum RouterAction<T: Routable> {
-    Push(T),
-    Replace(T),
-}
-
-impl<T: Routable> RouterAction<T> {
-    pub fn map<U: Routable>(self, f: impl FnOnce(T) -> U) -> RouterAction<U> {
-        match self {
-            Self::Push(routable) => RouterAction::Push(f(routable)),
-            Self::Replace(routable) => RouterAction::Replace(f(routable)),
-        }
-    }
-}
-
-/// Specializes the history API for a particular `Routable` type
-pub(crate) struct RouterAgent<T: Routable> {
-    link: AgentLink<Self>,
-    history: Box<dyn Bridge<HistoryAgent>>,
-    subscribers: HashSet<HandlerId>,
-}
-
-impl<T: Routable> Agent for RouterAgent<T> {
-    type Reach = Context<Self>;
-    type Message = Rc<Route>;
-    type Input = RouterAction<T>;
-    type Output = Rc<T>;
-
-    fn create(link: AgentLink<Self>) -> Self {
-        let history = HistoryAgent::bridge(link.callback(|x| x));
-
-        Self {
-            link,
-            history,
-            subscribers: HashSet::new(),
-        }
-    }
-
-    fn update(&mut self, msg: Rc<Route>) {
-        match T::from_route(&msg) {
-            Ok(routable) => {
-                let routable = Rc::new(routable);
-                for &id in &self.subscribers {
-                    self.link.respond(id, routable.clone())
-                }
-            }
-            Err(routable) => {
-                // Redirect to error route
-                self.history
-                    .send(HistoryAction::Replace(routable.to_route()))
-            }
-        }
-    }
-
-    fn handle_input(&mut self, msg: RouterAction<T>, _id: yew::worker::HandlerId) {
-        match msg {
-            RouterAction::Push(routable) => {
-                self.history.send(HistoryAction::Push(routable.to_route()))
-            }
-            RouterAction::Replace(routable) => {
-                self.history.send(HistoryAction::Push(routable.to_route()))
-            }
-        }
-    }
-
-    fn connected(&mut self, id: HandlerId) {
-        self.subscribers.insert(id);
-    }
-
-    fn disconnected(&mut self, id: HandlerId) {
-        self.subscribers.remove(&id);
-    }
-}
-
-impl<T: Routable> RouterAgent<T> {
-    pub(crate) fn current() -> T {
-        match T::from_route(&HistoryAgent::current()) {
-            Ok(routable) => routable,
-            Err(routable) => routable,
-        }
-    }
-}
diff --git a/packages/yew-router/src/components/link.rs b/packages/yew-router/src/components/link.rs
index 5a8deb23efa..af4d43a289c 100644
--- a/packages/yew-router/src/components/link.rs
+++ b/packages/yew-router/src/components/link.rs
@@ -1,5 +1,5 @@
-use crate::agents::router::RouterAction;
 use crate::router::use_router;
+use crate::services::router::RouterAction;
 use crate::Routable;
 use yew::prelude::*;
 
diff --git a/packages/yew-router/src/context.rs b/packages/yew-router/src/context.rs
index 4ff13b417d8..023ac774128 100644
--- a/packages/yew-router/src/context.rs
+++ b/packages/yew-router/src/context.rs
@@ -2,7 +2,7 @@ use std::rc::Rc;
 
 use yew::Callback;
 
-use crate::agents::router::RouterAction;
+use crate::services::router::RouterAction;
 use crate::Routable;
 
 #[derive(Debug, PartialEq)]
diff --git a/packages/yew-router/src/hidden.rs b/packages/yew-router/src/hidden.rs
index d186767aeab..7c3aa42d9da 100644
--- a/packages/yew-router/src/hidden.rs
+++ b/packages/yew-router/src/hidden.rs
@@ -14,7 +14,7 @@ use serde::de::DeserializeOwned;
 use serde::Serialize;
 use wasm_bindgen::{JsCast, JsValue};
 
-use crate::agents::history::Route;
+use crate::services::history::Route;
 pub use crate::Routable;
 
 /// This trait is implemented by the derive macro. There is a blanket implementation of
@@ -299,6 +299,10 @@ impl Muncher for PathSegmentMuncher {
 
         rev_path_acc.reverse();
         route.path = rev_path_acc.concat();
+
+        if route.path.is_empty() {
+            route.path = "/".into();
+        }
         args.store_route(route);
     }
 }
diff --git a/packages/yew-router/src/lib.rs b/packages/yew-router/src/lib.rs
index 40fc933d0f1..ff42760b204 100644
--- a/packages/yew-router/src/lib.rs
+++ b/packages/yew-router/src/lib.rs
@@ -53,20 +53,20 @@
 //! not expose or make use of it. It is instead recommended that a state management library like
 //! [yewdux](https://github.com/intendednull/yewdux) be used.
 
-mod agents;
 pub mod components;
 mod context;
 mod routable;
 pub mod router;
+pub mod services;
 pub mod utils;
 
 #[doc(hidden)]
 pub mod hidden;
 
-pub use crate::agents::router::RouterAction;
-pub use agents::history::HistoryAgent;
 pub use routable::Routable;
 pub use router::{use_router, Router};
+pub use services::history::HistoryService;
+pub use services::router::RouterAction;
 
 pub mod prelude {
     //! Prelude module to be imported when working with `yew-router`.
diff --git a/packages/yew-router/src/routable.rs b/packages/yew-router/src/routable.rs
index 124c78675c4..518e7e155be 100644
--- a/packages/yew-router/src/routable.rs
+++ b/packages/yew-router/src/routable.rs
@@ -1,4 +1,4 @@
-use crate::agents::history::Route;
+use crate::services::history::Route;
 
 pub use yew_router_macro::Routable;
 
diff --git a/packages/yew-router/src/router.rs b/packages/yew-router/src/router.rs
index d18554a9342..f058a33c295 100644
--- a/packages/yew-router/src/router.rs
+++ b/packages/yew-router/src/router.rs
@@ -8,8 +8,8 @@ use yew::html::AnyScope;
 use yew::prelude::*;
 use yew_functional::{get_current_scope, use_hook};
 
-use crate::agents::router::{RouterAction, RouterAgent};
 use crate::context::RoutingContext;
+use crate::services::router::{RouterAction, RouterListener, RouterService};
 use crate::Routable;
 
 pub struct Router<T: Routable>(Rc<InnerRouter<T>>);
@@ -26,11 +26,11 @@ enum InnerRouter<T: Routable> {
         current: RefCell<Rc<RoutingContext<T>>>,
         _handle: ContextHandle<Rc<RoutingContext<T>>>,
     },
-    // Used when we're directly interacting with the router agent
-    Agent {
+    // Used when we're directly interacting with the router service
+    Service {
         // Lazily initialize this to avoid unnecessary work
         current: RefCell<Option<Rc<T>>>,
-        bridge: RefCell<Box<dyn Bridge<RouterAgent<T>>>>,
+        _listener: RouterListener<T>,
     },
 }
 
@@ -42,7 +42,7 @@ enum InnerRouterUpdate<T: Routable> {
     // Used when we're mounted inside a routing context
     Context(Rc<RoutingContext<T>>),
     // Used when we're directly interacting with the router agent
-    Agent(Rc<T>),
+    Service(Rc<T>),
 }
 
 impl<T: Routable> Router<T> {
@@ -58,16 +58,16 @@ impl<T: Routable> Router<T> {
                 }
             } else {
                 let current = RefCell::new(None);
-                let bridge = RefCell::new(RouterAgent::bridge(
-                    callback.reform(|routable| RouterUpdate(InnerRouterUpdate::Agent(routable))),
-                ));
-                InnerRouter::Agent { current, bridge }
+                let _listener = RouterService::register(
+                    callback.reform(|routable| RouterUpdate(InnerRouterUpdate::Service(routable))),
+                );
+                InnerRouter::Service { current, _listener }
             },
         ))
     }
     pub fn update(&self, update: RouterUpdate<T>) {
         match (&*self.0, update.0) {
-            (InnerRouter::Agent { current, .. }, InnerRouterUpdate::Agent(routable)) => {
+            (InnerRouter::Service { current, .. }, InnerRouterUpdate::Service(routable)) => {
                 *current.borrow_mut() = Some(routable);
             }
             (InnerRouter::Context { current, .. }, InnerRouterUpdate::Context(ctx)) => {
@@ -78,12 +78,12 @@ impl<T: Routable> Router<T> {
     }
     pub fn route(&self) -> Rc<T> {
         match &*self.0 {
-            InnerRouter::Agent { current, .. } => {
+            InnerRouter::Service { current, .. } => {
                 let mut current = current.borrow_mut();
                 if let Some(route) = &*current {
                     route.clone()
                 } else {
-                    let route = Rc::new(RouterAgent::<T>::current());
+                    let route = RouterService::current::<T>();
                     *current = Some(route.clone());
                     route
                 }
@@ -93,7 +93,7 @@ impl<T: Routable> Router<T> {
     }
     pub fn dispatch(&self, action: RouterAction<T>) {
         match &*self.0 {
-            InnerRouter::Agent { bridge, .. } => bridge.borrow_mut().send(action),
+            InnerRouter::Service { .. } => RouterService::dispatch(action),
             InnerRouter::Context { current, .. } => current.borrow().onroute.emit(action),
         }
     }
diff --git a/packages/yew-router/src/agents.rs b/packages/yew-router/src/services.rs
similarity index 100%
rename from packages/yew-router/src/agents.rs
rename to packages/yew-router/src/services.rs
diff --git a/packages/yew-router/src/agents/history.rs b/packages/yew-router/src/services/history.rs
similarity index 57%
rename from packages/yew-router/src/agents/history.rs
rename to packages/yew-router/src/services/history.rs
index 1b83a382078..11144abffe5 100644
--- a/packages/yew-router/src/agents/history.rs
+++ b/packages/yew-router/src/services/history.rs
@@ -1,12 +1,12 @@
-use std::collections::HashSet;
+use std::cell::RefCell;
 use std::rc::Rc;
 
 use crate::utils::base_url;
 use wasm_bindgen::prelude::Closure;
-use wasm_bindgen::{JsCast, JsValue};
+use wasm_bindgen::JsCast;
+use wasm_bindgen::JsValue;
 use web_sys::EventTarget;
 use yew::utils::window;
-use yew::worker::{Agent, AgentLink, Bridged, Context, HandlerId};
 use yew::Callback;
 
 #[derive(Debug, Clone, PartialEq)]
@@ -97,29 +97,45 @@ pub enum HistoryAction {
     Go(i32),
 }
 
-/// Agent to interface with the history API.
-#[derive(Debug)]
-pub struct HistoryAgent {
-    link: AgentLink<Self>,
+struct HistoryState {
     last_route: Rc<Route>,
+    subscribers: Vec<Callback<Rc<Route>>>,
     cb: Closure<dyn Fn()>,
-    subscribers: HashSet<HandlerId>,
 }
 
-impl Agent for HistoryAgent {
-    type Reach = Context<Self>;
-
-    type Message = ();
-
-    type Input = HistoryAction;
+thread_local! {
+    static HISTORY_STATE: RefCell<Option<HistoryState>> = RefCell::new(None);
+}
 
-    type Output = Rc<Route>;
+/// Service to interface with the history API.
+#[derive(Debug)]
+pub struct HistoryService;
 
-    fn create(link: AgentLink<Self>) -> Self {
-        let last_route = Rc::new(Self::current());
+impl HistoryState {
+    fn with<R>(f: impl FnOnce(&mut Option<Self>) -> R) -> R {
+        HISTORY_STATE.with(|state| f(&mut *state.borrow_mut()))
+    }
+    fn determine_current_route() -> Route {
+        let window = window();
+        let history = window.history().expect("no history");
+        let location = window.location();
+        let path = location.pathname().expect("no pathname");
+        let query = location.search().expect("no pathname");
+        let hash = location.hash().expect("no pathname");
+        let state = history.state().expect("no state");
+        let mut res = Route {
+            path,
+            query,
+            hash,
+            state,
+        };
+        res.unapply_base();
+        res
+    }
 
-        let link2 = link.clone();
-        let cb: Closure<dyn Fn()> = Closure::wrap(Box::new(move || link2.send_message(())));
+    fn new() -> Self {
+        // Install event listeners
+        let cb: Closure<dyn Fn()> = Closure::wrap(Box::new(Self::update));
 
         let et: EventTarget = window().into();
         et.add_event_listener_with_callback("popstate", cb.as_ref().unchecked_ref())
@@ -128,93 +144,130 @@ impl Agent for HistoryAgent {
             .expect("add hashchange listener");
 
         Self {
-            link,
-            last_route,
+            last_route: Rc::new(Self::determine_current_route()),
+            subscribers: Vec::new(),
             cb,
-            subscribers: HashSet::new(),
         }
     }
 
-    fn update(&mut self, _msg: ()) {
-        let route = Rc::new(Self::current());
-        if route != self.last_route {
-            for &id in &self.subscribers {
-                self.link.respond(id, route.clone())
+    // We sometimes return a function to run when the state is not borrowed.
+    // This is so that callbacks don't panic if they try to access the state.
+    fn update_inner(maybe_state: &mut Option<Self>) -> Option<impl FnOnce() + 'static> {
+        let state = maybe_state.as_mut()?;
+        if state.subscribers.is_empty() {
+            *maybe_state = None;
+            None
+        } else {
+            let route = Rc::new(Self::determine_current_route());
+            if state.last_route != route {
+                state.last_route = route.clone();
+                let subscribers = state.subscribers.clone();
+                Some(move || {
+                    for subscriber in subscribers {
+                        subscriber.emit(route.clone());
+                    }
+                })
+            } else {
+                None
             }
         }
     }
 
-    fn handle_input(&mut self, msg: HistoryAction, _id: yew::worker::HandlerId) {
+    fn update() {
+        if let Some(f) = Self::with(Self::update_inner) {
+            f();
+        }
+    }
+
+    fn current_route(maybe_state: &mut Option<Self>) -> Rc<Route> {
+        maybe_state.get_or_insert_with(Self::new).last_route.clone()
+    }
+
+    fn register(maybe_state: &mut Option<Self>, callback: Callback<Rc<Route>>) -> HistoryListener {
+        maybe_state
+            .get_or_insert_with(Self::new)
+            .subscribers
+            .push(callback.clone());
+        HistoryListener(callback)
+    }
+
+    fn unregister(maybe_state: &mut Option<Self>, callback: &Callback<Rc<Route>>) {
+        if let Some(state) = maybe_state {
+            if let Some(index) = state
+                .subscribers
+                .iter()
+                .position(|subscriber| subscriber == callback)
+            {
+                state.subscribers.remove(index);
+            }
+        }
+    }
+}
+
+impl Drop for HistoryState {
+    fn drop(&mut self) {
+        let et: EventTarget = window().into();
+        et.remove_event_listener_with_callback("popstate", self.cb.as_ref().unchecked_ref())
+            .expect("remove popstate listener");
+        et.remove_event_listener_with_callback("hashchange", self.cb.as_ref().unchecked_ref())
+            .expect("remove hashchange listener");
+    }
+}
+
+pub struct HistoryListener(Callback<Rc<Route>>);
+
+impl Drop for HistoryListener {
+    fn drop(&mut self) {
+        HistoryState::with(|state| HistoryState::unregister(state, &self.0));
+    }
+}
+
+impl HistoryService {
+    pub fn dispatch(action: HistoryAction) {
         let history = window().history().expect("no history");
-        match msg {
+        match action {
             HistoryAction::Push(mut route) => {
                 route.apply_base();
                 history
                     .push_state_with_url(&route.state, "", Some(&route.url()))
                     .expect("push history");
+
+                // Not triggered automatically by `pushState`.
+                HistoryState::update();
             }
             HistoryAction::Replace(mut route) => {
                 route.apply_base();
                 history
                     .replace_state_with_url(&route.state, "", Some(&route.url()))
                     .expect("replace history");
+
+                // Not triggered automatically by `replaceState`.
+                HistoryState::update();
             }
             HistoryAction::Back => history.back().expect("back history"),
             HistoryAction::Forward => history.forward().expect("forward history"),
             HistoryAction::Go(index) => history.go_with_delta(index).expect("go history"),
         }
-
-        self.update(());
     }
-
-    fn destroy(&mut self) {
-        let et: EventTarget = window().into();
-        et.remove_event_listener_with_callback("hashchange", self.cb.as_ref().unchecked_ref())
-            .expect("remove hashchange listener");
-        et.remove_event_listener_with_callback("popstate", self.cb.as_ref().unchecked_ref())
-            .expect("remove popstate listener");
-    }
-
-    fn connected(&mut self, id: HandlerId) {
-        self.subscribers.insert(id);
-    }
-
-    fn disconnected(&mut self, id: HandlerId) {
-        self.subscribers.remove(&id);
-    }
-}
-
-impl HistoryAgent {
     pub fn push(route: Route) {
-        Self::bridge(Callback::noop()).send(HistoryAction::Push(route));
+        Self::dispatch(HistoryAction::Push(route));
     }
     pub fn replace(route: Route) {
-        Self::bridge(Callback::noop()).send(HistoryAction::Replace(route));
+        Self::dispatch(HistoryAction::Replace(route));
     }
     pub fn forward() {
-        Self::bridge(Callback::noop()).send(HistoryAction::Forward);
+        Self::dispatch(HistoryAction::Forward);
     }
     pub fn back() {
-        Self::bridge(Callback::noop()).send(HistoryAction::Back);
+        Self::dispatch(HistoryAction::Back);
     }
     pub fn go(index: i32) {
-        Self::bridge(Callback::noop()).send(HistoryAction::Go(index));
+        Self::dispatch(HistoryAction::Go(index));
     }
-    pub fn current() -> Route {
-        let window = window();
-        let history = window.history().expect("no history");
-        let location = window.location();
-        let path = location.pathname().expect("no pathname");
-        let query = location.search().expect("no pathname");
-        let hash = location.hash().expect("no pathname");
-        let state = history.state().expect("no state");
-        let mut res = Route {
-            path,
-            query,
-            hash,
-            state,
-        };
-        res.unapply_base();
-        res
+    pub fn current() -> Rc<Route> {
+        HistoryState::with(HistoryState::current_route)
+    }
+    pub fn register(callback: Callback<Rc<Route>>) -> HistoryListener {
+        HistoryState::with(|state| HistoryState::register(state, callback))
     }
 }
diff --git a/packages/yew-router/src/services/router.rs b/packages/yew-router/src/services/router.rs
new file mode 100644
index 00000000000..f211b4e67e8
--- /dev/null
+++ b/packages/yew-router/src/services/router.rs
@@ -0,0 +1,167 @@
+use std::cell::RefCell;
+use std::rc::Rc;
+
+use crate::Routable;
+use anymap::AnyMap;
+use yew::Callback;
+
+use super::history::{HistoryListener, HistoryService, Route};
+
+type Entry<'a, T> = anymap::Entry<'a, dyn anymap::any::Any, T>;
+
+#[derive(Debug, Clone)]
+#[non_exhaustive]
+pub enum RouterAction<T: Routable> {
+    Push(T),
+    Replace(T),
+}
+
+impl<T: Routable> RouterAction<T> {
+    pub fn map<U: Routable>(self, f: impl FnOnce(T) -> U) -> RouterAction<U> {
+        match self {
+            Self::Push(routable) => RouterAction::Push(f(routable)),
+            Self::Replace(routable) => RouterAction::Replace(f(routable)),
+        }
+    }
+}
+
+/// Specializes the history API for a particular `Routable` type
+pub(crate) struct RouterState<T: Routable> {
+    last_route: Rc<T>,
+    subscribers: Vec<Callback<Rc<T>>>,
+    _listener: HistoryListener,
+}
+
+thread_local! {
+    static ROUTER_STATE: RefCell<AnyMap> = RefCell::new(AnyMap::new());
+}
+
+impl<T: Routable> RouterState<T> {
+    fn with<R>(f: impl FnOnce(Entry<Self>) -> R) -> R {
+        ROUTER_STATE.with(|state| f(state.borrow_mut().entry()))
+    }
+    fn try_with<R>(mut f: impl FnMut(Entry<Self>) -> Result<R, T>) -> R {
+        match Self::with(&mut f) {
+            Ok(res) => return res,
+            Err(error) => Self::handle_error(error),
+        };
+        match Self::with(&mut f) {
+            Ok(res) => res,
+            Err(_) => panic!("Bug in `Routable` implementation"),
+        }
+    }
+    fn determine_current_route() -> Result<T, T> {
+        T::from_route(&*HistoryService::current())
+    }
+    fn new() -> Result<Self, T> {
+        let last_route = Rc::new(Self::determine_current_route()?);
+        Ok(Self {
+            last_route,
+            subscribers: Vec::new(),
+            _listener: HistoryService::register(Callback::from(Self::update)),
+        })
+    }
+
+    fn try_insert(entry: Entry<Self>) -> Result<&mut Self, T> {
+        Ok(match entry {
+            Entry::Occupied(occ) => occ.into_mut(),
+            Entry::Vacant(vac) => vac.insert(Self::new()?),
+        })
+    }
+
+    // We sometimes return a function to run when the state is not borrowed.
+    // This is so that callbacks don't panic if they try to access the state.
+    fn update_inner(
+        entry: Entry<Self>,
+        route: Rc<Route>,
+    ) -> Result<Option<impl FnOnce() + 'static>, T> {
+        let mut occ = match entry {
+            Entry::Occupied(occ) => occ,
+            Entry::Vacant(_) => return Ok(None),
+        };
+        let state = occ.get_mut();
+        Ok(if state.subscribers.is_empty() {
+            occ.remove();
+            None
+        } else {
+            let route = Rc::new(T::from_route(&*route)?);
+            if state.last_route != route {
+                state.last_route = route.clone();
+                let subscribers = state.subscribers.clone();
+                Some(move || {
+                    for subscriber in subscribers {
+                        subscriber.emit(route.clone());
+                    }
+                })
+            } else {
+                None
+            }
+        })
+    }
+
+    fn handle_error(error: T) {
+        // Whenever we fail to recognize a route, we redirect to the default one
+        HistoryService::replace(error.to_route());
+    }
+
+    fn update(route: Rc<Route>) {
+        match Self::with(|entry| Self::update_inner(entry, route)) {
+            Ok(None) => {}
+            Ok(Some(f)) => f(),
+            Err(error) => Self::handle_error(error),
+        }
+    }
+
+    fn current_route(entry: Entry<Self>) -> Result<Rc<T>, T> {
+        Ok(Self::try_insert(entry)?.last_route.clone())
+    }
+
+    fn register(entry: Entry<Self>, callback: Callback<Rc<T>>) -> Result<RouterListener<T>, T> {
+        Self::try_insert(entry)?.subscribers.push(callback.clone());
+        Ok(RouterListener(callback))
+    }
+
+    fn unregister(entry: Entry<Self>, callback: &Callback<Rc<T>>) {
+        if let Entry::Occupied(occ) = entry {
+            let state = occ.into_mut();
+            if let Some(index) = state
+                .subscribers
+                .iter()
+                .position(|subscriber| subscriber == callback)
+            {
+                state.subscribers.remove(index);
+            }
+        }
+    }
+}
+pub struct RouterListener<T: Routable>(Callback<Rc<T>>);
+
+impl<T: Routable> Drop for RouterListener<T> {
+    fn drop(&mut self) {
+        RouterState::with(|entry| RouterState::unregister(entry, &self.0));
+    }
+}
+
+#[derive(Debug)]
+pub struct RouterService;
+
+impl RouterService {
+    pub fn dispatch<T: Routable>(action: RouterAction<T>) {
+        match action {
+            RouterAction::Push(route) => HistoryService::push(route.to_route()),
+            RouterAction::Replace(route) => HistoryService::replace(route.to_route()),
+        }
+    }
+    pub fn push<T: Routable>(route: T) {
+        Self::dispatch(RouterAction::Push(route));
+    }
+    pub fn replace<T: Routable>(route: T) {
+        Self::dispatch(RouterAction::Replace(route));
+    }
+    pub fn current<T: Routable>() -> Rc<T> {
+        RouterState::try_with(RouterState::current_route)
+    }
+    pub fn register<T: Routable>(callback: Callback<Rc<T>>) -> RouterListener<T> {
+        RouterState::try_with(|entry| RouterState::register(entry, callback.clone()))
+    }
+}

From 7c49979f810808ecc75bf013e6a96827ad8fbce4 Mon Sep 17 00:00:00 2001
From: Diggory Blake <diggsey@googlemail.com>
Date: Fri, 28 May 2021 01:36:15 +0100
Subject: [PATCH 3/3] Further API refactoring

---
 examples/router/src/main.rs                   |  69 +++++-----
 examples/router/src/pages/post_list.rs        |   2 +-
 .../yew-functional/src/hooks/use_context.rs   |  24 ++--
 .../yew-router/src/components/consumer.rs     |  91 +++++++++++++
 packages/yew-router/src/components/link.rs    |   7 +-
 packages/yew-router/src/components/mod.rs     |   6 +
 packages/yew-router/src/components/mount.rs   |  63 +++++++++
 packages/yew-router/src/context.rs            |  12 +-
 packages/yew-router/src/hidden.rs             |   4 +-
 .../yew-router/src/{services => }/history.rs  | 121 ++++++++---------
 packages/yew-router/src/lib.rs                |   6 +-
 packages/yew-router/src/routable.rs           |   4 +-
 packages/yew-router/src/router.rs             | 123 ++++++------------
 packages/yew-router/src/services.rs           |   2 -
 .../src/{services/router.rs => top_level.rs}  |  53 ++++----
 packages/yew-router/tests/router.rs           |   2 +-
 packages/yew/src/context.rs                   | 115 ++++++++++------
 packages/yew/src/html/component/scope.rs      |  16 +--
 18 files changed, 424 insertions(+), 296 deletions(-)
 create mode 100644 packages/yew-router/src/components/consumer.rs
 create mode 100644 packages/yew-router/src/components/mount.rs
 rename packages/yew-router/src/{services => }/history.rs (66%)
 delete mode 100644 packages/yew-router/src/services.rs
 rename packages/yew-router/src/{services/router.rs => top_level.rs} (76%)

diff --git a/examples/router/src/main.rs b/examples/router/src/main.rs
index 7ee9b47d5dc..c16b68c3370 100644
--- a/examples/router/src/main.rs
+++ b/examples/router/src/main.rs
@@ -1,5 +1,7 @@
+use std::rc::Rc;
+
 use yew::prelude::*;
-use yew_router::prelude::*;
+use yew_router::{prelude::*, router::RouterListener};
 
 mod components;
 mod content;
@@ -9,7 +11,6 @@ use pages::{
     author::Author, author_list::AuthorList, home::Home, page_not_found::PageNotFound, post::Post,
     post_list::PostList,
 };
-use yew_router::router::RouterUpdate;
 
 #[derive(Routable, PartialEq, Clone, Debug)]
 pub enum Route {
@@ -38,24 +39,28 @@ impl Default for Route {
 
 pub enum Msg {
     ToggleNavbar,
-    RouteChanged(RouterUpdate<Route>),
+    RouteChanged(Rc<Route>),
 }
 
 pub struct Model {
     link: ComponentLink<Self>,
-    router: Router<Route>,
+    route: Rc<Route>,
     navbar_active: bool,
+    _listener: RouterListener<Route>,
 }
 impl Component for Model {
     type Message = Msg;
     type Properties = ();
 
     fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
-        let router = Router::new(link.clone(), link.callback(Msg::RouteChanged));
+        let router = Router::new(link.clone());
+        let route = router.current();
+        let _listener = router.register(link.callback(Msg::RouteChanged));
         Self {
             link,
-            router,
+            route,
             navbar_active: false,
+            _listener,
         }
     }
 
@@ -65,8 +70,8 @@ impl Component for Model {
                 self.navbar_active = !self.navbar_active;
                 true
             }
-            Msg::RouteChanged(update) => {
-                self.router.update(update);
+            Msg::RouteChanged(route) => {
+                self.route = route;
                 true
             }
         }
@@ -81,9 +86,28 @@ impl Component for Model {
             <>
                 { self.view_nav() }
 
-                <main>
-                    { switch(&self.router.route()) }
-                </main>
+                <main>{
+                    match &*self.route {
+                        Route::Post { id } => {
+                            html! { <Post seed=*id /> }
+                        }
+                        Route::Posts { page } => {
+                            html! { <PostList page=*page /> }
+                        }
+                        Route::Author { id } => {
+                            html! { <Author seed=*id /> }
+                        }
+                        Route::Authors => {
+                            html! { <AuthorList /> }
+                        }
+                        Route::Home => {
+                            html! { <Home /> }
+                        }
+                        Route::NotFound => {
+                            html! { <PageNotFound /> }
+                        }
+                    }
+                }</main>
                 <footer class="footer">
                     <div class="content has-text-centered">
                         { "Powered by " }
@@ -151,29 +175,6 @@ impl Model {
     }
 }
 
-fn switch(routes: &Route) -> Html {
-    match routes {
-        Route::Post { id } => {
-            html! { <Post seed=*id /> }
-        }
-        Route::Posts { page } => {
-            html! { <PostList page=*page /> }
-        }
-        Route::Author { id } => {
-            html! { <Author seed=*id /> }
-        }
-        Route::Authors => {
-            html! { <AuthorList /> }
-        }
-        Route::Home => {
-            html! { <Home /> }
-        }
-        Route::NotFound => {
-            html! { <PageNotFound /> }
-        }
-    }
-}
-
 fn main() {
     wasm_logger::init(wasm_logger::Config::new(log::Level::Trace));
     yew::start_app::<Model>();
diff --git a/examples/router/src/pages/post_list.rs b/examples/router/src/pages/post_list.rs
index 9876cabce8c..1f00e759e2a 100644
--- a/examples/router/src/pages/post_list.rs
+++ b/examples/router/src/pages/post_list.rs
@@ -20,7 +20,7 @@ impl Component for PostList {
     type Properties = PostListProps;
 
     fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
-        let router = Router::new(link, Callback::noop());
+        let router = Router::new(link);
         Self { router, props }
     }
 
diff --git a/packages/yew-functional/src/hooks/use_context.rs b/packages/yew-functional/src/hooks/use_context.rs
index 34beb9a3c4f..c3c81afd0c0 100644
--- a/packages/yew-functional/src/hooks/use_context.rs
+++ b/packages/yew-functional/src/hooks/use_context.rs
@@ -1,5 +1,8 @@
 use crate::{get_current_scope, use_hook};
-use yew::context::ContextHandle;
+use yew::{
+    context::{Context, ContextListener},
+    Callback,
+};
 
 /// Hook for consuming context values in function components.
 /// The context of the type passed as `T` is returned. If there is no such context in scope, `None` is returned.
@@ -32,7 +35,7 @@ use yew::context::ContextHandle;
 pub fn use_context<T: Clone + PartialEq + 'static>() -> Option<T> {
     struct UseContextState<T2: Clone + PartialEq + 'static> {
         initialized: bool,
-        context: Option<(T2, ContextHandle<T2>)>,
+        context: Option<(Context<T2>, ContextListener<T2>)>,
     }
 
     let scope = get_current_scope()
@@ -46,18 +49,15 @@ pub fn use_context<T: Clone + PartialEq + 'static>() -> Option<T> {
         |state: &mut UseContextState<T>, updater| {
             if !state.initialized {
                 state.initialized = true;
-                let callback = move |ctx: T| {
-                    updater.callback(|state: &mut UseContextState<T>| {
-                        if let Some(context) = &mut state.context {
-                            context.0 = ctx;
-                        }
-                        true
-                    });
-                };
-                state.context = scope.context::<T>(callback.into());
+                if let Some(context) = scope.context::<T>() {
+                    let listener = context.register(Callback::from(move |_| {
+                        updater.callback(|_: &mut UseContextState<T>| true);
+                    }));
+                    state.context = Some((context, listener));
+                }
             }
 
-            Some(state.context.as_ref()?.0.clone())
+            Some(state.context.as_ref()?.0.current())
         },
         |state| {
             state.context = None;
diff --git a/packages/yew-router/src/components/consumer.rs b/packages/yew-router/src/components/consumer.rs
new file mode 100644
index 00000000000..e75f4cd3fc8
--- /dev/null
+++ b/packages/yew-router/src/components/consumer.rs
@@ -0,0 +1,91 @@
+use std::{
+    fmt::{self, Debug},
+    rc::Rc,
+};
+
+use yew::{Component, ComponentLink, Html, Properties};
+
+use crate::{router::RouterListener, Routable, Router};
+
+/// Wraps `Rc` around `Fn` so it can be passed as a prop.
+pub struct RenderFn<T: Routable>(Rc<dyn Fn(&Router<T>) -> Html>);
+
+impl<T: Routable> RenderFn<T> {
+    /// Creates a new [`RenderFn`]
+    ///
+    /// It is recommended that you use [`Router::render`] instead
+    pub fn new(value: impl Fn(&Router<T>) -> Html + 'static) -> Self {
+        Self(Rc::new(value))
+    }
+}
+
+impl<T: Routable> Debug for RenderFn<T> {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        f.debug_tuple("RenderFn").finish()
+    }
+}
+
+impl<T: Routable> Clone for RenderFn<T> {
+    fn clone(&self) -> Self {
+        Self(Rc::clone(&self.0))
+    }
+}
+
+impl<T: Routable> PartialEq for RenderFn<T> {
+    fn eq(&self, other: &Self) -> bool {
+        // https://github.com/rust-lang/rust-clippy/issues/6524
+        #[allow(clippy::vtable_address_comparisons)]
+        Rc::ptr_eq(&self.0, &other.0)
+    }
+}
+
+/// Props for [`RouterConsumer`]
+#[derive(Clone, PartialEq, Properties)]
+pub struct RouterConsumerProps<T: Routable> {
+    /// Callback which returns [`Html`] to be rendered for the current route.
+    pub render: RenderFn<T>,
+}
+
+/// The context provider component.
+///
+/// Every child (direct or indirect) of this component may access the context value.
+/// In order to consume contexts, [`ComponentLink::context`][Scope::context] method is used,
+/// In function components the `use_context` hook is used.
+#[derive(Debug)]
+pub struct RouterConsumer<T: Routable> {
+    render: RenderFn<T>,
+    router: Router<T>,
+    _listener: RouterListener<T>,
+}
+
+impl<T: Routable> Component for RouterConsumer<T> {
+    type Message = ();
+    type Properties = RouterConsumerProps<T>;
+
+    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+        let router = Router::new(link.clone());
+        let _listener = router.register(link.callback(|_| ()));
+        Self {
+            render: props.render,
+            router,
+            _listener,
+        }
+    }
+
+    fn update(&mut self, _msg: Self::Message) -> bool {
+        true
+    }
+
+    fn change(&mut self, props: Self::Properties) -> bool {
+        if self.render != props.render {
+            self.render = props.render;
+            true
+        } else {
+            false
+        }
+    }
+
+    fn view(&self) -> Html {
+        (&self.render.0)(&self.router)
+    }
+}
diff --git a/packages/yew-router/src/components/link.rs b/packages/yew-router/src/components/link.rs
index af4d43a289c..73027f3a3ec 100644
--- a/packages/yew-router/src/components/link.rs
+++ b/packages/yew-router/src/components/link.rs
@@ -1,13 +1,12 @@
 use crate::router::use_router;
-use crate::services::router::RouterAction;
-use crate::Routable;
+use crate::{Routable, RouterAction};
 use yew::prelude::*;
 
 use yew_functional::function_component;
 
 /// Props for [`Link`]
 #[derive(Properties, Clone, PartialEq)]
-pub struct LinkProps<R: Routable + Clone> {
+pub struct LinkProps<R: Routable> {
     /// CSS classes to add to the anchor element (optional).
     #[prop_or_default]
     pub classes: Classes,
@@ -19,7 +18,7 @@ pub struct LinkProps<R: Routable + Clone> {
 #[function_component(Link)]
 pub fn link<R>(props: &LinkProps<R>) -> Html
 where
-    R: Routable + Clone + PartialEq + 'static,
+    R: Routable,
 {
     let router = use_router::<R>();
     let route = props.route.clone();
diff --git a/packages/yew-router/src/components/mod.rs b/packages/yew-router/src/components/mod.rs
index b6808da2757..f6b6c34fc87 100644
--- a/packages/yew-router/src/components/mod.rs
+++ b/packages/yew-router/src/components/mod.rs
@@ -2,3 +2,9 @@
 
 mod link;
 pub use link::*;
+
+mod mount;
+pub use mount::*;
+
+mod consumer;
+pub use consumer::*;
diff --git a/packages/yew-router/src/components/mount.rs b/packages/yew-router/src/components/mount.rs
new file mode 100644
index 00000000000..6b43a58df5f
--- /dev/null
+++ b/packages/yew-router/src/components/mount.rs
@@ -0,0 +1,63 @@
+use std::rc::Rc;
+
+use yew::{html, Callback, Children, Component, ComponentLink, ContextProvider, Html, Properties};
+
+use crate::{context::RoutingContext, Routable, RouterAction};
+
+/// Props for [`ContextProvider`]
+#[derive(Debug, Clone, PartialEq, Properties)]
+pub struct MountProps<T: Routable> {
+    /// Context value to be passed down
+    pub route: Rc<T>,
+    pub onroute: Callback<RouterAction<T>>,
+    /// Children
+    pub children: Children,
+}
+
+/// The context provider component.
+///
+/// Every child (direct or indirect) of this component may access the context value.
+/// In order to consume contexts, [`ComponentLink::context`][Scope::context] method is used,
+/// In function components the `use_context` hook is used.
+#[derive(Debug)]
+pub struct Mount<T: Routable> {
+    context: RoutingContext<T>,
+    children: Children,
+}
+
+impl<T: Routable> Component for Mount<T> {
+    type Message = ();
+    type Properties = MountProps<T>;
+
+    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
+        Self {
+            children: props.children,
+            context: RoutingContext {
+                route: props.route,
+                onroute: props.onroute,
+            },
+        }
+    }
+
+    fn update(&mut self, _msg: Self::Message) -> bool {
+        false
+    }
+
+    fn change(&mut self, props: Self::Properties) -> bool {
+        self.children = props.children;
+        self.context = RoutingContext {
+            route: props.route,
+            onroute: props.onroute,
+        };
+        true
+    }
+
+    fn view(&self) -> Html {
+        let context = self.context.clone();
+        html! {
+            <ContextProvider<RoutingContext<T>> context=context>
+                { self.children.clone() }
+            </ContextProvider<RoutingContext<T>>>
+        }
+    }
+}
diff --git a/packages/yew-router/src/context.rs b/packages/yew-router/src/context.rs
index 023ac774128..53f2d5cd3f7 100644
--- a/packages/yew-router/src/context.rs
+++ b/packages/yew-router/src/context.rs
@@ -2,11 +2,19 @@ use std::rc::Rc;
 
 use yew::Callback;
 
-use crate::services::router::RouterAction;
-use crate::Routable;
+use crate::{Routable, RouterAction};
 
 #[derive(Debug, PartialEq)]
 pub struct RoutingContext<T: Routable> {
     pub(crate) route: Rc<T>,
     pub(crate) onroute: Callback<RouterAction<T>>,
 }
+
+impl<T: Routable> Clone for RoutingContext<T> {
+    fn clone(&self) -> Self {
+        Self {
+            route: self.route.clone(),
+            onroute: self.onroute.clone(),
+        }
+    }
+}
diff --git a/packages/yew-router/src/hidden.rs b/packages/yew-router/src/hidden.rs
index 7c3aa42d9da..7ed8f778c5d 100644
--- a/packages/yew-router/src/hidden.rs
+++ b/packages/yew-router/src/hidden.rs
@@ -14,12 +14,12 @@ use serde::de::DeserializeOwned;
 use serde::Serialize;
 use wasm_bindgen::{JsCast, JsValue};
 
-use crate::services::history::Route;
+use crate::history::Route;
 pub use crate::Routable;
 
 /// This trait is implemented by the derive macro. There is a blanket implementation of
 /// `Routeable` for all `DerivedRoutable`.
-pub trait DerivedRoutable: PartialEq + Any + Default {
+pub trait DerivedRoutable: PartialEq + Any + Default + Clone {
     const VARIANTS: &'static [RouteMuncher<Self>];
 
     fn to_args(&self) -> (usize, Args);
diff --git a/packages/yew-router/src/services/history.rs b/packages/yew-router/src/history.rs
similarity index 66%
rename from packages/yew-router/src/services/history.rs
rename to packages/yew-router/src/history.rs
index 11144abffe5..87e343ed9e6 100644
--- a/packages/yew-router/src/services/history.rs
+++ b/packages/yew-router/src/history.rs
@@ -2,8 +2,7 @@ use std::cell::RefCell;
 use std::rc::Rc;
 
 use crate::utils::base_url;
-use wasm_bindgen::prelude::Closure;
-use wasm_bindgen::JsCast;
+use gloo::events::EventListener;
 use wasm_bindgen::JsValue;
 use web_sys::EventTarget;
 use yew::utils::window;
@@ -100,17 +99,13 @@ pub enum HistoryAction {
 struct HistoryState {
     last_route: Rc<Route>,
     subscribers: Vec<Callback<Rc<Route>>>,
-    cb: Closure<dyn Fn()>,
+    _listeners: [EventListener; 2],
 }
 
 thread_local! {
     static HISTORY_STATE: RefCell<Option<HistoryState>> = RefCell::new(None);
 }
 
-/// Service to interface with the history API.
-#[derive(Debug)]
-pub struct HistoryService;
-
 impl HistoryState {
     fn with<R>(f: impl FnOnce(&mut Option<Self>) -> R) -> R {
         HISTORY_STATE.with(|state| f(&mut *state.borrow_mut()))
@@ -135,18 +130,16 @@ impl HistoryState {
 
     fn new() -> Self {
         // Install event listeners
-        let cb: Closure<dyn Fn()> = Closure::wrap(Box::new(Self::update));
-
         let et: EventTarget = window().into();
-        et.add_event_listener_with_callback("popstate", cb.as_ref().unchecked_ref())
-            .expect("add popstate listener");
-        et.add_event_listener_with_callback("hashchange", cb.as_ref().unchecked_ref())
-            .expect("add hashchange listener");
+        let _listeners = [
+            EventListener::new(&et, "popstate", |_| Self::update()),
+            EventListener::new(&et, "hashchange", |_| Self::update()),
+        ];
 
         Self {
             last_route: Rc::new(Self::determine_current_route()),
             subscribers: Vec::new(),
-            cb,
+            _listeners,
         }
     }
 
@@ -204,16 +197,6 @@ impl HistoryState {
     }
 }
 
-impl Drop for HistoryState {
-    fn drop(&mut self) {
-        let et: EventTarget = window().into();
-        et.remove_event_listener_with_callback("popstate", self.cb.as_ref().unchecked_ref())
-            .expect("remove popstate listener");
-        et.remove_event_listener_with_callback("hashchange", self.cb.as_ref().unchecked_ref())
-            .expect("remove hashchange listener");
-    }
-}
-
 pub struct HistoryListener(Callback<Rc<Route>>);
 
 impl Drop for HistoryListener {
@@ -222,52 +205,50 @@ impl Drop for HistoryListener {
     }
 }
 
-impl HistoryService {
-    pub fn dispatch(action: HistoryAction) {
-        let history = window().history().expect("no history");
-        match action {
-            HistoryAction::Push(mut route) => {
-                route.apply_base();
-                history
-                    .push_state_with_url(&route.state, "", Some(&route.url()))
-                    .expect("push history");
-
-                // Not triggered automatically by `pushState`.
-                HistoryState::update();
-            }
-            HistoryAction::Replace(mut route) => {
-                route.apply_base();
-                history
-                    .replace_state_with_url(&route.state, "", Some(&route.url()))
-                    .expect("replace history");
-
-                // Not triggered automatically by `replaceState`.
-                HistoryState::update();
-            }
-            HistoryAction::Back => history.back().expect("back history"),
-            HistoryAction::Forward => history.forward().expect("forward history"),
-            HistoryAction::Go(index) => history.go_with_delta(index).expect("go history"),
+pub fn dispatch(action: HistoryAction) {
+    let history = window().history().expect("no history");
+    match action {
+        HistoryAction::Push(mut route) => {
+            route.apply_base();
+            history
+                .push_state_with_url(&route.state, "", Some(&route.url()))
+                .expect("push history");
+
+            // Not triggered automatically by `pushState`.
+            HistoryState::update();
         }
+        HistoryAction::Replace(mut route) => {
+            route.apply_base();
+            history
+                .replace_state_with_url(&route.state, "", Some(&route.url()))
+                .expect("replace history");
+
+            // Not triggered automatically by `replaceState`.
+            HistoryState::update();
+        }
+        HistoryAction::Back => history.back().expect("back history"),
+        HistoryAction::Forward => history.forward().expect("forward history"),
+        HistoryAction::Go(index) => history.go_with_delta(index).expect("go history"),
     }
-    pub fn push(route: Route) {
-        Self::dispatch(HistoryAction::Push(route));
-    }
-    pub fn replace(route: Route) {
-        Self::dispatch(HistoryAction::Replace(route));
-    }
-    pub fn forward() {
-        Self::dispatch(HistoryAction::Forward);
-    }
-    pub fn back() {
-        Self::dispatch(HistoryAction::Back);
-    }
-    pub fn go(index: i32) {
-        Self::dispatch(HistoryAction::Go(index));
-    }
-    pub fn current() -> Rc<Route> {
-        HistoryState::with(HistoryState::current_route)
-    }
-    pub fn register(callback: Callback<Rc<Route>>) -> HistoryListener {
-        HistoryState::with(|state| HistoryState::register(state, callback))
-    }
+}
+pub fn push(route: Route) {
+    dispatch(HistoryAction::Push(route));
+}
+pub fn replace(route: Route) {
+    dispatch(HistoryAction::Replace(route));
+}
+pub fn forward() {
+    dispatch(HistoryAction::Forward);
+}
+pub fn back() {
+    dispatch(HistoryAction::Back);
+}
+pub fn go(index: i32) {
+    dispatch(HistoryAction::Go(index));
+}
+pub fn current() -> Rc<Route> {
+    HistoryState::with(HistoryState::current_route)
+}
+pub fn register(callback: Callback<Rc<Route>>) -> HistoryListener {
+    HistoryState::with(|state| HistoryState::register(state, callback))
 }
diff --git a/packages/yew-router/src/lib.rs b/packages/yew-router/src/lib.rs
index ff42760b204..ef632fde570 100644
--- a/packages/yew-router/src/lib.rs
+++ b/packages/yew-router/src/lib.rs
@@ -55,9 +55,10 @@
 
 pub mod components;
 mod context;
+pub mod history;
 mod routable;
 pub mod router;
-pub mod services;
+pub mod top_level;
 pub mod utils;
 
 #[doc(hidden)]
@@ -65,8 +66,7 @@ pub mod hidden;
 
 pub use routable::Routable;
 pub use router::{use_router, Router};
-pub use services::history::HistoryService;
-pub use services::router::RouterAction;
+pub use top_level::RouterAction;
 
 pub mod prelude {
     //! Prelude module to be imported when working with `yew-router`.
diff --git a/packages/yew-router/src/routable.rs b/packages/yew-router/src/routable.rs
index 518e7e155be..fb3c1b1f7c5 100644
--- a/packages/yew-router/src/routable.rs
+++ b/packages/yew-router/src/routable.rs
@@ -1,4 +1,4 @@
-use crate::services::history::Route;
+use crate::history::Route;
 
 pub use yew_router_macro::Routable;
 
@@ -8,7 +8,7 @@ pub use yew_router_macro::Routable;
 ///
 /// Use derive macro to implement it. Although it *is* possible to implement it manually,
 /// it is discouraged.
-pub trait Routable: PartialEq + 'static {
+pub trait Routable: PartialEq + Clone + 'static {
     /// Converts path to an instance of the routes enum. If the conversion succeeds, the
     /// returned variant corresponds to the route. If the conversion fails, a fallback variant
     /// is returned, which the caller should redirect to.
diff --git a/packages/yew-router/src/router.rs b/packages/yew-router/src/router.rs
index f058a33c295..6c87da5f3f1 100644
--- a/packages/yew-router/src/router.rs
+++ b/packages/yew-router/src/router.rs
@@ -1,18 +1,18 @@
 //! Router Component.
 
-use std::cell::RefCell;
+use std::fmt::{self, Debug};
 use std::rc::Rc;
 
-use yew::context::ContextHandle;
+use yew::context::{Context, ContextListener};
 use yew::html::AnyScope;
 use yew::prelude::*;
 use yew_functional::{get_current_scope, use_hook};
 
 use crate::context::RoutingContext;
-use crate::services::router::{RouterAction, RouterListener, RouterService};
+use crate::top_level::{self, RouterAction, TopLevelListener};
 use crate::Routable;
 
-pub struct Router<T: Routable>(Rc<InnerRouter<T>>);
+pub struct Router<T: Routable>(Option<Context<RoutingContext<T>>>);
 
 impl<T: Routable> Clone for Router<T> {
     fn clone(&self) -> Self {
@@ -20,81 +20,50 @@ impl<T: Routable> Clone for Router<T> {
     }
 }
 
-enum InnerRouter<T: Routable> {
-    // Used when we're mounted inside a routing context
-    Context {
-        current: RefCell<Rc<RoutingContext<T>>>,
-        _handle: ContextHandle<Rc<RoutingContext<T>>>,
-    },
-    // Used when we're directly interacting with the router service
-    Service {
-        // Lazily initialize this to avoid unnecessary work
-        current: RefCell<Option<Rc<T>>>,
-        _listener: RouterListener<T>,
-    },
+impl<T: Routable> Debug for Router<T> {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        f.debug_tuple("Router").finish()
+    }
 }
 
-#[derive(Debug)]
-pub struct RouterUpdate<T: Routable>(InnerRouterUpdate<T>);
+enum RouterListenerInner<T: Routable> {
+    Mounted(ContextListener<RoutingContext<T>>),
+    TopLevel(TopLevelListener<T>),
+}
+pub struct RouterListener<T: Routable>(RouterListenerInner<T>);
 
-#[derive(Debug)]
-enum InnerRouterUpdate<T: Routable> {
-    // Used when we're mounted inside a routing context
-    Context(Rc<RoutingContext<T>>),
-    // Used when we're directly interacting with the router agent
-    Service(Rc<T>),
+impl<T: Routable> Debug for RouterListener<T> {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        f.debug_tuple("RouterListener").finish()
+    }
 }
 
 impl<T: Routable> Router<T> {
-    pub fn new(link: impl Into<AnyScope>, callback: Callback<RouterUpdate<T>>) -> Self {
+    pub fn new(link: impl Into<AnyScope>) -> Self {
         let link = link.into();
-        Self(Rc::new(
-            if let Some((current, handle)) =
-                link.context(callback.reform(|ctx| RouterUpdate(InnerRouterUpdate::Context(ctx))))
-            {
-                InnerRouter::Context {
-                    current: RefCell::new(current),
-                    _handle: handle,
-                }
-            } else {
-                let current = RefCell::new(None);
-                let _listener = RouterService::register(
-                    callback.reform(|routable| RouterUpdate(InnerRouterUpdate::Service(routable))),
-                );
-                InnerRouter::Service { current, _listener }
-            },
-        ))
+        Self(link.context())
     }
-    pub fn update(&self, update: RouterUpdate<T>) {
-        match (&*self.0, update.0) {
-            (InnerRouter::Service { current, .. }, InnerRouterUpdate::Service(routable)) => {
-                *current.borrow_mut() = Some(routable);
-            }
-            (InnerRouter::Context { current, .. }, InnerRouterUpdate::Context(ctx)) => {
-                *current.borrow_mut() = ctx;
-            }
-            _ => unreachable!(),
-        }
+    pub fn register(&self, callback: Callback<Rc<T>>) -> RouterListener<T> {
+        RouterListener(if let Some(context) = &self.0 {
+            RouterListenerInner::Mounted(
+                context.register(callback.reform(|ctx: RoutingContext<T>| ctx.route)),
+            )
+        } else {
+            RouterListenerInner::TopLevel(top_level::register(callback))
+        })
     }
-    pub fn route(&self) -> Rc<T> {
-        match &*self.0 {
-            InnerRouter::Service { current, .. } => {
-                let mut current = current.borrow_mut();
-                if let Some(route) = &*current {
-                    route.clone()
-                } else {
-                    let route = RouterService::current::<T>();
-                    *current = Some(route.clone());
-                    route
-                }
-            }
-            InnerRouter::Context { current, .. } => current.borrow().route.clone(),
+    pub fn current(&self) -> Rc<T> {
+        if let Some(context) = &self.0 {
+            context.current().route
+        } else {
+            top_level::current()
         }
     }
     pub fn dispatch(&self, action: RouterAction<T>) {
-        match &*self.0 {
-            InnerRouter::Service { .. } => RouterService::dispatch(action),
-            InnerRouter::Context { current, .. } => current.borrow().onroute.emit(action),
+        if let Some(context) = &self.0 {
+            context.current().onroute.emit(action)
+        } else {
+            top_level::dispatch(action)
         }
     }
     pub fn dispatcher<U>(
@@ -119,7 +88,7 @@ impl<T: Routable> Router<T> {
 
 pub fn use_router<T: Routable>() -> Router<T> {
     struct UseRouterState<T2: Routable> {
-        router: Option<Router<T2>>,
+        router: Option<(Router<T2>, RouterListener<T2>)>,
     }
 
     let scope = get_current_scope()
@@ -129,20 +98,14 @@ pub fn use_router<T: Routable>() -> Router<T> {
         move || UseRouterState { router: None },
         |state: &mut UseRouterState<T>, updater| {
             if state.router.is_none() {
-                let callback = move |update: RouterUpdate<T>| {
-                    updater.callback(|state: &mut UseRouterState<T>| {
-                        if let Some(router) = &state.router {
-                            router.update(update);
-                            true
-                        } else {
-                            false
-                        }
-                    });
-                };
-                state.router = Some(Router::new(scope, callback.into()))
+                let router = Router::new(scope);
+                let listener = router.register(Callback::from(move |_| {
+                    updater.callback(|_: &mut UseRouterState<T>| true);
+                }));
+                state.router = Some((router, listener));
             }
 
-            state.router.clone().unwrap()
+            state.router.as_ref().unwrap().0.clone()
         },
         |state| {
             state.router = None;
diff --git a/packages/yew-router/src/services.rs b/packages/yew-router/src/services.rs
deleted file mode 100644
index c4813b92f60..00000000000
--- a/packages/yew-router/src/services.rs
+++ /dev/null
@@ -1,2 +0,0 @@
-pub mod history;
-pub mod router;
diff --git a/packages/yew-router/src/services/router.rs b/packages/yew-router/src/top_level.rs
similarity index 76%
rename from packages/yew-router/src/services/router.rs
rename to packages/yew-router/src/top_level.rs
index f211b4e67e8..5e946efba36 100644
--- a/packages/yew-router/src/services/router.rs
+++ b/packages/yew-router/src/top_level.rs
@@ -5,7 +5,7 @@ use crate::Routable;
 use anymap::AnyMap;
 use yew::Callback;
 
-use super::history::{HistoryListener, HistoryService, Route};
+use super::history::{self, HistoryListener, Route};
 
 type Entry<'a, T> = anymap::Entry<'a, dyn anymap::any::Any, T>;
 
@@ -51,14 +51,14 @@ impl<T: Routable> RouterState<T> {
         }
     }
     fn determine_current_route() -> Result<T, T> {
-        T::from_route(&*HistoryService::current())
+        T::from_route(&*history::current())
     }
     fn new() -> Result<Self, T> {
         let last_route = Rc::new(Self::determine_current_route()?);
         Ok(Self {
             last_route,
             subscribers: Vec::new(),
-            _listener: HistoryService::register(Callback::from(Self::update)),
+            _listener: history::register(Callback::from(Self::update)),
         })
     }
 
@@ -101,7 +101,7 @@ impl<T: Routable> RouterState<T> {
 
     fn handle_error(error: T) {
         // Whenever we fail to recognize a route, we redirect to the default one
-        HistoryService::replace(error.to_route());
+        history::replace(error.to_route());
     }
 
     fn update(route: Rc<Route>) {
@@ -116,9 +116,9 @@ impl<T: Routable> RouterState<T> {
         Ok(Self::try_insert(entry)?.last_route.clone())
     }
 
-    fn register(entry: Entry<Self>, callback: Callback<Rc<T>>) -> Result<RouterListener<T>, T> {
+    fn register(entry: Entry<Self>, callback: Callback<Rc<T>>) -> Result<TopLevelListener<T>, T> {
         Self::try_insert(entry)?.subscribers.push(callback.clone());
-        Ok(RouterListener(callback))
+        Ok(TopLevelListener(callback))
     }
 
     fn unregister(entry: Entry<Self>, callback: &Callback<Rc<T>>) {
@@ -134,34 +134,29 @@ impl<T: Routable> RouterState<T> {
         }
     }
 }
-pub struct RouterListener<T: Routable>(Callback<Rc<T>>);
+pub struct TopLevelListener<T: Routable>(Callback<Rc<T>>);
 
-impl<T: Routable> Drop for RouterListener<T> {
+impl<T: Routable> Drop for TopLevelListener<T> {
     fn drop(&mut self) {
         RouterState::with(|entry| RouterState::unregister(entry, &self.0));
     }
 }
 
-#[derive(Debug)]
-pub struct RouterService;
-
-impl RouterService {
-    pub fn dispatch<T: Routable>(action: RouterAction<T>) {
-        match action {
-            RouterAction::Push(route) => HistoryService::push(route.to_route()),
-            RouterAction::Replace(route) => HistoryService::replace(route.to_route()),
-        }
-    }
-    pub fn push<T: Routable>(route: T) {
-        Self::dispatch(RouterAction::Push(route));
-    }
-    pub fn replace<T: Routable>(route: T) {
-        Self::dispatch(RouterAction::Replace(route));
-    }
-    pub fn current<T: Routable>() -> Rc<T> {
-        RouterState::try_with(RouterState::current_route)
-    }
-    pub fn register<T: Routable>(callback: Callback<Rc<T>>) -> RouterListener<T> {
-        RouterState::try_with(|entry| RouterState::register(entry, callback.clone()))
+pub fn dispatch<T: Routable>(action: RouterAction<T>) {
+    match action {
+        RouterAction::Push(route) => history::push(route.to_route()),
+        RouterAction::Replace(route) => history::replace(route.to_route()),
     }
 }
+pub fn push<T: Routable>(route: T) {
+    dispatch(RouterAction::Push(route));
+}
+pub fn replace<T: Routable>(route: T) {
+    dispatch(RouterAction::Replace(route));
+}
+pub fn current<T: Routable>() -> Rc<T> {
+    RouterState::try_with(RouterState::current_route)
+}
+pub fn register<T: Routable>(callback: Callback<Rc<T>>) -> TopLevelListener<T> {
+    RouterState::try_with(|entry| RouterState::register(entry, callback.clone()))
+}
diff --git a/packages/yew-router/tests/router.rs b/packages/yew-router/tests/router.rs
index b9811685287..400e8faab08 100644
--- a/packages/yew-router/tests/router.rs
+++ b/packages/yew-router/tests/router.rs
@@ -56,7 +56,7 @@ fn component() -> Html {
         }))
     });
 
-    match &*router.route() {
+    match &*router.current() {
         Routes::Home => html! {
             <>
                 <div id="result">{"Home"}</div>
diff --git a/packages/yew/src/context.rs b/packages/yew/src/context.rs
index c1d64180dab..43aae527942 100644
--- a/packages/yew/src/context.rs
+++ b/packages/yew/src/context.rs
@@ -1,9 +1,9 @@
 //! This module defines the `ContextProvider` component.
 
-use crate::html::Scope;
 use crate::{html, Callback, Children, Component, ComponentLink, Html, Properties};
 use slab::Slab;
 use std::cell::RefCell;
+use std::rc::Rc;
 
 /// Props for [`ContextProvider`]
 #[derive(Debug, Clone, PartialEq, Properties)]
@@ -22,57 +22,90 @@ pub struct ContextProviderProps<T: Clone + PartialEq> {
 #[derive(Debug)]
 pub struct ContextProvider<T: Clone + PartialEq + 'static> {
     link: ComponentLink<Self>,
-    context: T,
     children: Children,
-    consumers: RefCell<Slab<Callback<T>>>,
+    pub(crate) context: Context<T>,
 }
 
-/// Owns the connection to a context provider. When dropped, the component will
-/// no longer receive updates from the provider.
 #[derive(Debug)]
-pub struct ContextHandle<T: Clone + PartialEq + 'static> {
-    provider: Scope<ContextProvider<T>>,
-    key: usize,
+struct ContextState<T: Clone + PartialEq + 'static> {
+    value: T,
+    listeners: Slab<Callback<T>>,
 }
 
-impl<T: Clone + PartialEq + 'static> Drop for ContextHandle<T> {
-    fn drop(&mut self) {
-        if let Some(component) = self.provider.get_component() {
-            component.consumers.borrow_mut().remove(self.key);
+/// A context returned by `scope.context()`. This can be used to access the
+/// current context value, or register a callback for when the value changes.
+#[derive(Debug, Clone)]
+pub struct Context<T: Clone + PartialEq + 'static> {
+    state: Rc<RefCell<ContextState<T>>>,
+}
+
+impl<T: Clone + PartialEq + 'static> Context<T> {
+    fn new(value: T) -> Self {
+        Self {
+            state: Rc::new(RefCell::new(ContextState {
+                value,
+                listeners: Slab::new(),
+            })),
         }
     }
-}
 
-impl<T: Clone + PartialEq> ContextProvider<T> {
-    /// Add the callback to the subscriber list to be called whenever the context changes.
-    /// The consumer is unsubscribed as soon as the callback is dropped.
-    pub(crate) fn subscribe_consumer(&self, callback: Callback<T>) -> (T, ContextHandle<T>) {
-        let ctx = self.context.clone();
-        let key = self.consumers.borrow_mut().insert(callback);
-
-        (
-            ctx,
-            ContextHandle {
-                provider: self.link.clone(),
-                key,
-            },
-        )
+    /// Get the current context value.
+    pub fn current(&self) -> T {
+        self.state.borrow().value.clone()
+    }
+
+    /// Register a callback to be called whenever the context changes.
+    /// The callback will be unregistered when the listener is dropped.
+    pub fn register(&self, callback: Callback<T>) -> ContextListener<T> {
+        let key = (*self.state).borrow_mut().listeners.insert(callback);
+        ContextListener {
+            context: self.clone(),
+            key,
+        }
     }
+    fn store(&self, value: T) {
+        let triggers = {
+            let mut state = (*self.state).borrow_mut();
+            if state.value != value {
+                state.value = value;
+                state
+                    .listeners
+                    .iter()
+                    .map(|(_, callback)| {
+                        let value = state.value.clone();
+                        let callback = callback.clone();
+                        move || callback.emit(value)
+                    })
+                    .collect()
+            } else {
+                Vec::new()
+            }
+        };
 
-    /// Notify all subscribed consumers and remove dropped consumers from the list.
-    fn notify_consumers(&mut self) {
-        let consumers: Vec<Callback<T>> = self
-            .consumers
-            .borrow()
-            .iter()
-            .map(|(_, v)| v.clone())
-            .collect();
-        for consumer in consumers {
-            consumer.emit(self.context.clone());
+        // Call into user-code only once state is no longer borrowed.
+        for trigger in triggers {
+            trigger();
         }
     }
 }
 
+/// Owns the connection to a context provider. When dropped, the component will
+/// no longer receive updates from the provider.
+#[derive(Debug)]
+pub struct ContextListener<T: Clone + PartialEq + 'static> {
+    context: Context<T>,
+    key: usize,
+}
+
+impl<T: Clone + PartialEq + 'static> Drop for ContextListener<T> {
+    fn drop(&mut self) {
+        (*self.context.state)
+            .borrow_mut()
+            .listeners
+            .remove(self.key);
+    }
+}
+
 impl<T: Clone + PartialEq + 'static> Component for ContextProvider<T> {
     type Message = ();
     type Properties = ContextProviderProps<T>;
@@ -81,8 +114,7 @@ impl<T: Clone + PartialEq + 'static> Component for ContextProvider<T> {
         Self {
             link,
             children: props.children,
-            context: props.context,
-            consumers: RefCell::new(Slab::new()),
+            context: Context::new(props.context),
         }
     }
 
@@ -98,10 +130,7 @@ impl<T: Clone + PartialEq + 'static> Component for ContextProvider<T> {
             true
         };
 
-        if self.context != props.context {
-            self.context = props.context;
-            self.notify_consumers();
-        }
+        self.context.store(props.context);
 
         should_render
     }
diff --git a/packages/yew/src/html/component/scope.rs b/packages/yew/src/html/component/scope.rs
index 8fed6e9258f..4b024f1133e 100644
--- a/packages/yew/src/html/component/scope.rs
+++ b/packages/yew/src/html/component/scope.rs
@@ -7,7 +7,7 @@ use super::{
     Component,
 };
 use crate::callback::Callback;
-use crate::context::{ContextHandle, ContextProvider};
+use crate::context::{Context, ContextProvider};
 use crate::html::NodeRef;
 use crate::scheduler::{scheduler, Shared};
 use crate::utils::document;
@@ -79,13 +79,10 @@ impl AnyScope {
 
     /// Accesses a value provided by a parent `ContextProvider` component of the
     /// same type.
-    pub fn context<T: Clone + PartialEq + 'static>(
-        &self,
-        callback: Callback<T>,
-    ) -> Option<(T, ContextHandle<T>)> {
+    pub fn context<T: Clone + PartialEq + 'static>(&self) -> Option<Context<T>> {
         let scope = self.find_parent_scope::<ContextProvider<T>>()?;
         let component = scope.get_component()?;
-        Some(component.subscribe_consumer(callback))
+        Some(component.context.clone())
     }
 }
 
@@ -338,11 +335,8 @@ impl<COMP: Component> Scope<COMP> {
 
     /// Accesses a value provided by a parent `ContextProvider` component of the
     /// same type.
-    pub fn context<T: Clone + PartialEq + 'static>(
-        &self,
-        callback: Callback<T>,
-    ) -> Option<(T, ContextHandle<T>)> {
-        self.to_any().context(callback)
+    pub fn context<T: Clone + PartialEq + 'static>(&self) -> Option<Context<T>> {
+        self.to_any().context()
     }
 }