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()
     }
 }