Merge pull request #203 from DioxusLabs/jk/local-router

Feat: abstract the router on a per-platform basis and add docs

Cargo.toml

@@ -31,12 +31,12 @@ dioxus-interpreter-js = { path = "./packages/interpreter", version = "^0.0.0", o
 [features]
 default = ["macro", "hooks", "html"]
 
-macro = ["dioxus-core-macro"]
 # macro = ["dioxus-core-macro", "dioxus-rsx"]
+macro = ["dioxus-core-macro"]
 hooks = ["dioxus-hooks"]
 html = ["dioxus-html"]
 ssr = ["dioxus-ssr"]
-web = ["dioxus-web"]
+web = ["dioxus-web", "dioxus-router/web"]
 desktop = ["dioxus-desktop"]
 ayatana = ["dioxus-desktop/ayatana"]
 router = ["dioxus-router"]
@@ -72,7 +72,7 @@ dioxus = { path = ".", features = ["desktop", "ssr", "router", "fermi"] }
 fern = { version = "0.6.0", features = ["colored"] }
 criterion = "0.3.5"
 thiserror = "1.0.30"
-
+env_logger = "0.9.0"
 
 [[bench]]
 name = "create"

examples/fermi.rs

@@ -1,7 +1,6 @@
 #![allow(non_snake_case)]
 
 use dioxus::prelude::*;
-use fermi::prelude::*;
 
 fn main() {
     dioxus::desktop::launch(app)

examples/flat_router.rs

@@ -0,0 +1,40 @@
+use dioxus::prelude::*;
+
+use dioxus::router::*;
+
+use dioxus::desktop::tao::dpi::LogicalSize;
+
+fn main() {
+    env_logger::init();
+
+    dioxus::desktop::launch_cfg(app, |c| {
+        c.with_window(|c| {
+            c.with_title("Spinsense Client")
+                .with_inner_size(LogicalSize::new(600, 1000))
+                .with_resizable(false)
+        })
+    })
+}
+
+fn app(cx: Scope) -> Element {
+    cx.render(rsx! {
+        Router {
+            Route { to: "/", "Home" }
+            Route { to: "/games", "Games" }
+            Route { to: "/play", "Play" }
+            Route { to: "/settings", "Settings" }
+
+            p {
+                "----"
+            }
+            nav {
+                ul {
+                    Link { to: "/", li { "Home" } }
+                    Link { to: "/games", li { "Games" } }
+                    Link { to: "/play", li { "Play" } }
+                    Link { to: "/settings", li { "Settings" } }
+                }
+            }
+        }
+    })
+}

examples/router.rs

@@ -31,7 +31,7 @@ fn app(cx: Scope) -> Element {
 }
 
 fn BlogPost(cx: Scope) -> Element {
-    let post = dioxus::router::use_route(&cx).last_segment();
+    let post = dioxus::router::use_route(&cx).last_segment()?;
 
     cx.render(rsx! {
         div {
@@ -47,7 +47,8 @@ struct Query {
 }
 
 fn User(cx: Scope) -> Element {
-    let post = dioxus::router::use_route(&cx).last_segment();
+    let post = dioxus::router::use_route(&cx).last_segment()?;
+
     let query = dioxus::router::use_route(&cx)
         .query::<Query>()
         .unwrap_or(Query { bold: false });

packages/core/src/scopes.rs

@@ -327,12 +327,12 @@ impl ScopeArena {
         while let Some(id) = cur_el.take() {
             if let Some(el) = nodes.get(id.0) {
                 let real_el = unsafe { &**el };
-                log::debug!("looking for listener on {:?}", real_el);
+                log::trace!("looking for listener on {:?}", real_el);
 
                 if let VNode::Element(real_el) = real_el {
                     for listener in real_el.listeners.borrow().iter() {
                         if listener.event == event.name {
-                            log::debug!("calling listener {:?}", listener.event);
+                            log::trace!("calling listener {:?}", listener.event);
                             if state.canceled.get() {
                                 // stop bubbling if canceled
                                 break;
@@ -440,7 +440,7 @@ impl<'a, P> std::ops::Deref for Scope<'a, P> {
 /// `ScopeId` is a `usize` that is unique across the entire VirtualDOM and across time. ScopeIDs will never be reused
 /// once a component has been unmounted.
 #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
-#[derive(Copy, Clone, PartialEq, Eq, Hash, Debug)]
+#[derive(Copy, Clone, PartialEq, Eq, Hash, Debug, PartialOrd, Ord)]
 pub struct ScopeId(pub usize);
 
 /// A task's unique identifier.
@@ -489,7 +489,7 @@ pub struct ScopeState {
     pub(crate) hook_idx: Cell<usize>,
 
     // shared state -> todo: move this out of scopestate
-    pub(crate) shared_contexts: RefCell<HashMap<TypeId, Rc<dyn Any>>>,
+    pub(crate) shared_contexts: RefCell<HashMap<TypeId, Box<dyn Any>>>,
     pub(crate) tasks: Rc<TaskQueue>,
 }
 
@@ -676,11 +676,10 @@ impl ScopeState {
     ///     rsx!(cx, div { "hello {state.0}" })
     /// }
     /// ```
-    pub fn provide_context<T: 'static>(&self, value: T) -> Rc<T> {
-        let value = Rc::new(value);
+    pub fn provide_context<T: 'static + Clone>(&self, value: T) -> T {
         self.shared_contexts
             .borrow_mut()
-            .insert(TypeId::of::<T>(), value.clone())
+            .insert(TypeId::of::<T>(), Box::new(value.clone()))
             .and_then(|f| f.downcast::<T>().ok());
         value
     }
@@ -703,14 +702,12 @@ impl ScopeState {
     ///     rsx!(cx, div { "hello {state.0}" })
     /// }
     /// ```
-    pub fn provide_root_context<T: 'static>(&self, value: T) -> Rc<T> {
-        let value = Rc::new(value);
-
+    pub fn provide_root_context<T: 'static + Clone>(&self, value: T) -> T {
         // if we *are* the root component, then we can just provide the context directly
         if self.scope_id() == ScopeId(0) {
             self.shared_contexts
                 .borrow_mut()
-                .insert(TypeId::of::<T>(), value.clone())
+                .insert(TypeId::of::<T>(), Box::new(value.clone()))
                 .and_then(|f| f.downcast::<T>().ok());
             return value;
         }
@@ -724,7 +721,7 @@ impl ScopeState {
                 let exists = parent
                     .shared_contexts
                     .borrow_mut()
-                    .insert(TypeId::of::<T>(), value.clone());
+                    .insert(TypeId::of::<T>(), Box::new(value.clone()));
 
                 if exists.is_some() {
                     log::warn!("Context already provided to parent scope - replacing it");
@@ -739,9 +736,9 @@ impl ScopeState {
     }
 
     /// Try to retrieve a SharedState with type T from the any parent Scope.
-    pub fn consume_context<T: 'static>(&self) -> Option<Rc<T>> {
+    pub fn consume_context<T: 'static + Clone>(&self) -> Option<T> {
         if let Some(shared) = self.shared_contexts.borrow().get(&TypeId::of::<T>()) {
-            Some(shared.clone().downcast::<T>().unwrap())
+            Some((*shared.downcast_ref::<T>().unwrap()).clone())
         } else {
             let mut search_parent = self.parent_scope;
 
@@ -749,7 +746,7 @@ impl ScopeState {
                 // safety: all parent pointers are valid thanks to the bump arena
                 let parent = unsafe { &*parent_ptr };
                 if let Some(shared) = parent.shared_contexts.borrow().get(&TypeId::of::<T>()) {
-                    return Some(shared.clone().downcast::<T>().unwrap());
+                    return Some(shared.downcast_ref::<T>().unwrap().clone());
                 }
                 search_parent = parent.parent_scope;
             }

packages/desktop/src/controller.rs

@@ -2,8 +2,8 @@ use crate::desktop_context::{DesktopContext, UserWindowEvent};
 use dioxus_core::*;
 use std::{
     collections::HashMap,
-    sync::atomic::AtomicBool,
-    sync::{Arc, RwLock},
+    sync::Arc,
+    sync::{atomic::AtomicBool, Mutex},
 };
 use wry::{
     self,
@@ -14,7 +14,7 @@ use wry::{
 pub(super) struct DesktopController {
     pub(super) webviews: HashMap<WindowId, WebView>,
     pub(super) sender: futures_channel::mpsc::UnboundedSender<SchedulerMsg>,
-    pub(super) pending_edits: Arc<RwLock<Vec<String>>>,
+    pub(super) pending_edits: Arc<Mutex<Vec<String>>>,
     pub(super) quit_app_on_close: bool,
     pub(super) is_ready: Arc<AtomicBool>,
 }
@@ -27,13 +27,13 @@ impl DesktopController {
         props: P,
         proxy: EventLoopProxy<UserWindowEvent>,
     ) -> Self {
-        let edit_queue = Arc::new(RwLock::new(Vec::new()));
-        let pending_edits = edit_queue.clone();
-
+        let edit_queue = Arc::new(Mutex::new(Vec::new()));
         let (sender, receiver) = futures_channel::mpsc::unbounded::<SchedulerMsg>();
-        let return_sender = sender.clone();
 
+        let pending_edits = edit_queue.clone();
+        let return_sender = sender.clone();
         let desktop_context_proxy = proxy.clone();
+
         std::thread::spawn(move || {
             // We create the runtime as multithreaded, so you can still "spawn" onto multiple threads
             let runtime = tokio::runtime::Builder::new_multi_thread()
@@ -52,7 +52,7 @@ impl DesktopController {
                 let edits = dom.rebuild();
 
                 edit_queue
-                    .write()
+                    .lock()
                     .unwrap()
                     .push(serde_json::to_string(&edits.edits).unwrap());
 
@@ -62,9 +62,10 @@ impl DesktopController {
                 loop {
                     dom.wait_for_work().await;
                     let mut muts = dom.work_with_deadline(|| false);
+
                     while let Some(edit) = muts.pop() {
                         edit_queue
-                            .write()
+                            .lock()
                             .unwrap()
                             .push(serde_json::to_string(&edit.edits).unwrap());
                     }
@@ -93,7 +94,7 @@ impl DesktopController {
 
     pub(super) fn try_load_ready_webviews(&mut self) {
         if self.is_ready.load(std::sync::atomic::Ordering::Relaxed) {
-            let mut queue = self.pending_edits.write().unwrap();
+            let mut queue = self.pending_edits.lock().unwrap();
             let (_id, view) = self.webviews.iter_mut().next().unwrap();
 
             while let Some(edit) = queue.pop() {

packages/desktop/src/desktop_context.rs

@@ -1,14 +1,15 @@
-use std::rc::Rc;
-
+use crate::controller::DesktopController;
 use dioxus_core::ScopeState;
+use wry::application::event_loop::ControlFlow;
 use wry::application::event_loop::EventLoopProxy;
+use wry::application::window::Fullscreen as WryFullscreen;
 
 use UserWindowEvent::*;
 
 pub type ProxyType = EventLoopProxy<UserWindowEvent>;
 
 /// Get an imperative handle to the current window
-pub fn use_window(cx: &ScopeState) -> &Rc<DesktopContext> {
+pub fn use_window(cx: &ScopeState) -> &DesktopContext {
     cx.use_hook(|_| cx.consume_context::<DesktopContext>())
         .as_ref()
         .unwrap()
@@ -120,11 +121,6 @@ impl DesktopContext {
     }
 }
 
-use wry::application::event_loop::ControlFlow;
-use wry::application::window::Fullscreen as WryFullscreen;
-
-use crate::controller::DesktopController;
-
 #[derive(Debug)]
 pub enum UserWindowEvent {
     Update,

packages/fermi/src/hooks/atom_root.rs

@@ -4,8 +4,8 @@ use std::rc::Rc;
 
 // Returns the atom root, initiaizing it at the root of the app if it does not exist.
 pub fn use_atom_root(cx: &ScopeState) -> &Rc<AtomRoot> {
-    cx.use_hook(|_| match cx.consume_context::<AtomRoot>() {
+    cx.use_hook(|_| match cx.consume_context::<Rc<AtomRoot>>() {
         Some(root) => root,
-        None => cx.provide_root_context(AtomRoot::new(cx.schedule_update_any())),
+        None => cx.provide_root_context(Rc::new(AtomRoot::new(cx.schedule_update_any()))),
     })
 }

packages/fermi/src/hooks/init_atom_root.rs

@@ -4,8 +4,8 @@ use std::rc::Rc;
 
 // Initializes the atom root and retuns it;
 pub fn use_init_atom_root(cx: &ScopeState) -> &Rc<AtomRoot> {
-    cx.use_hook(|_| match cx.consume_context::<AtomRoot>() {
+    cx.use_hook(|_| match cx.consume_context::<Rc<AtomRoot>>() {
         Some(ctx) => ctx,
-        None => cx.provide_context(AtomRoot::new(cx.schedule_update_any())),
+        None => cx.provide_context(Rc::new(AtomRoot::new(cx.schedule_update_any()))),
     })
 }

packages/hooks/src/use_shared_state.rs

@@ -6,7 +6,7 @@ use std::{
     sync::Arc,
 };
 
-type ProvidedState<T> = RefCell<ProvidedStateInner<T>>;
+type ProvidedState<T> = Rc<RefCell<ProvidedStateInner<T>>>;
 
 // Tracks all the subscribers to a shared State
 pub struct ProvidedStateInner<T> {
@@ -91,7 +91,7 @@ pub fn use_context<'a, T: 'static>(cx: &'a ScopeState) -> Option<UseSharedState<
 }
 
 struct SharedStateInner<T: 'static> {
-    root: Option<Rc<ProvidedState<T>>>,
+    root: Option<ProvidedState<T>>,
     value: Option<Rc<RefCell<T>>>,
     scope_id: ScopeId,
     needs_notification: Cell<bool>,
@@ -174,11 +174,11 @@ where
 ///
 pub fn use_context_provider<T: 'static>(cx: &ScopeState, f: impl FnOnce() -> T) {
     cx.use_hook(|_| {
-        let state: ProvidedState<T> = RefCell::new(ProvidedStateInner {
+        let state: ProvidedState<T> = Rc::new(RefCell::new(ProvidedStateInner {
             value: Rc::new(RefCell::new(f())),
             notify_any: cx.schedule_update_any(),
             consumers: HashSet::new(),
-        });
+        }));
         cx.provide_context(state)
     });
 }

packages/hooks/src/usecoroutine.rs

@@ -1,7 +1,6 @@
 use dioxus_core::{ScopeState, TaskId};
 pub use futures_channel::mpsc::{UnboundedReceiver, UnboundedSender};
 use std::future::Future;
-use std::rc::Rc;
 
 /// Maintain a handle over a future that can be paused, resumed, and canceled.
 ///
@@ -76,7 +75,7 @@ where
 /// Get a handle to a coroutine higher in the tree
 ///
 /// See the docs for [`use_coroutine`] for more details.
-pub fn use_coroutine_handle<M: 'static>(cx: &ScopeState) -> Option<&Rc<CoroutineHandle<M>>> {
+pub fn use_coroutine_handle<M: 'static>(cx: &ScopeState) -> Option<&CoroutineHandle<M>> {
     cx.use_hook(|_| cx.consume_context::<CoroutineHandle<M>>())
         .as_ref()
 }
@@ -86,6 +85,15 @@ pub struct CoroutineHandle<T> {
     task: TaskId,
 }
 
+impl<T> Clone for CoroutineHandle<T> {
+    fn clone(&self) -> Self {
+        Self {
+            tx: self.tx.clone(),
+            task: self.task,
+        }
+    }
+}
+
 impl<T> CoroutineHandle<T> {
     /// Get the ID of this coroutine
     #[must_use]

packages/router/Cargo.toml

@@ -14,10 +14,8 @@ keywords = ["dom", "ui", "gui", "react", "wasm"]
 dioxus-core = { path = "../core", version = "^0.1.9", default-features = false }
 dioxus-html = { path = "../html", version = "^0.1.6", default-features = false }
 dioxus-core-macro = { path = "../core-macro", version = "^0.1.7" }
-
-serde = "1"
-serde_urlencoded = "0.7"
-# url = "2.2.2"
+futures-channel = "0.3.21"
+url = { version = "2.2.2", default-features = false }
 
 # for wasm
 web-sys = { version = "0.3", features = [
@@ -33,16 +31,17 @@ web-sys = { version = "0.3", features = [
 ], optional = true }
 wasm-bindgen = { version = "0.2", optional = true }
 js-sys = { version = "0.3", optional = true }
-gloo = { version = "0.5", optional = true }
+gloo-events = { version = "0.1.1", optional = true }
 log = "0.4.14"
-
+thiserror = "1.0.30"
+futures-util = "0.3.21"
+serde = { version = "1", optional = true }
+serde_urlencoded = { version = "0.7.1", optional = true }
 
 [features]
-default = ["derive", "web"]
-web = ["web-sys", "gloo", "js-sys", "wasm-bindgen"]
-desktop = []
-mobile = []
-derive = []
+default = ["query"]
+web = ["web-sys", "gloo-events", "js-sys", "wasm-bindgen"]
+query = ["serde", "serde_urlencoded"]
 wasm_test = []
 
 [dev-dependencies]
@@ -52,9 +51,13 @@ log = "0.4.14"
 wasm-logger = "0.2.0"
 wasm-bindgen-test = "0.3"
 gloo-utils = "0.1.2"
+dioxus-ssr = { path = "../ssr" }
+
+dioxus-router = { path = ".", default-features = false }
+
+[target.wasm32-unknown-unknown.dev-dependencies]
+dioxus-router = { path = ".", features = ["web"] }
 
 [dev-dependencies.web-sys]
 version = "0.3"
-features = [
-    "Document",
-]
+features = ["Document"]

packages/router/README.md

@@ -51,7 +51,7 @@
 
 Dioxus Router is a first-party Router for all your Dioxus Apps. It provides a React-Router style interface that works anywhere: across the browser, SSR, and natively.
 
-```rust
+```rust, ignore
 fn app() {
     cx.render(rsx! {
         Router {

packages/router/examples/simple.rs

@@ -8,21 +8,28 @@ use dioxus_router::*;
 fn main() {
     console_error_panic_hook::set_once();
     wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
-    dioxus_web::launch(APP);
+    dioxus_web::launch(app);
 }
 
-static APP: Component = |cx| {
+fn app(cx: Scope) -> Element {
     cx.render(rsx! {
         Router {
-            onchange: move |route| log::info!("route changed to {}", route),
-            Route { to: "/", Home {} }
-            Route { to: "blog"
-                Route { to: "/", BlogList {} }
-                Route { to: ":id", BlogPost {} }
+            h1 { "Your app here" }
+            ul {
+                Link { to: "/", li { "home"  }}
+                Link { to: "/blog", li { "blog"  }}
+                Link { to: "/blog/tim", li { "tims' blog"  }}
+                Link { to: "/blog/bill", li { "bills' blog"  }}
+                Link { to: "/apples", li { "go to apples"  }}
             }
+            Route { to: "/", Home {} }
+            Route { to: "/blog/", BlogList {} }
+            Route { to: "/blog/:id/", BlogPost {} }
+            Route { to: "/oranges", "Oranges are not apples!" }
+            Redirect { from: "/apples", to: "/oranges" }
         }
     })
-};
+}
 
 fn Home(cx: Scope) -> Element {
     cx.render(rsx! {
@@ -37,6 +44,9 @@ fn BlogList(cx: Scope) -> Element {
 }
 
 fn BlogPost(cx: Scope) -> Element {
-    let id = use_route(&cx).segment::<usize>("id")?;
+    let id = use_route(&cx).segment("id")?;
+
+    log::debug!("rendering blog post {}", id);
+
     cx.render(rsx! { div { "{id:?}" } })
 }

packages/router/src/cfg.rs

@@ -0,0 +1,4 @@
+#[derive(Default)]
+pub struct RouterCfg {
+    pub base_url: Option<String>,
+}

packages/router/src/components/link.rs

@@ -1,97 +1,116 @@
-use crate::RouterService;
-use dioxus::Attribute;
+use std::sync::Arc;
+
+use crate::RouterCore;
 use dioxus_core as dioxus;
 use dioxus_core::prelude::*;
 use dioxus_core_macro::{format_args_f, rsx, Props};
 use dioxus_html as dioxus_elements;
 
+/// Props for the [`Link`](struct.Link.html) component.
 #[derive(Props)]
 pub struct LinkProps<'a> {
-    to: &'a str,
-
-    /// The url that gets pushed to the history stack
-    ///
-    /// You can either put in your own inline method or just autoderive the route using `derive(Routable)`
+    /// The route to link to. This can be a relative path, or a full URL.
     ///
     /// ```rust, ignore
+    /// // Absolute path
+    /// Link { to: "/home", "Go Home" }
     ///
-    /// Link { to: Route::Home, href: |_| "home".to_string() }
-    ///
-    /// // or
-    ///
-    /// Link { to: Route::Home, href: Route::as_url }
-    ///
+    /// // Relative path
+    /// Link { to: "../", "Go Up" }
     /// ```
-    #[props(default, strip_option)]
-    href: Option<&'a str>,
+    pub to: &'a str,
 
+    /// Set the class of the inner link ['a'](https://www.w3schools.com/tags/tag_a.asp) element.
+    ///
+    /// This can be useful when styling the inner link element.
     #[props(default, strip_option)]
-    class: Option<&'a str>,
+    pub class: Option<&'a str>,
 
+    /// Set the ID of the inner link ['a'](https://www.w3schools.com/tags/tag_a.asp) element.
+    ///
+    /// This can be useful when styling the inner link element.
     #[props(default, strip_option)]
-    id: Option<&'a str>,
+    pub id: Option<&'a str>,
 
+    /// Set the title of the window after the link is clicked..
     #[props(default, strip_option)]
-    title: Option<&'a str>,
+    pub title: Option<&'a str>,
 
+    /// Autodetect if a link is external or not.
+    ///
+    /// This is automatically set to `true` and will use http/https detection
     #[props(default = true)]
-    autodetect: bool,
+    pub autodetect: bool,
 
     /// Is this link an external link?
     #[props(default = false)]
-    external: bool,
+    pub external: bool,
 
     /// New tab?
     #[props(default = false)]
-    new_tab: bool,
-
-    children: Element<'a>,
+    pub new_tab: bool,
 
-    #[props(default)]
-    attributes: Option<&'a [Attribute<'a>]>,
+    /// Pass children into the `<a>` element
+    pub children: Element<'a>,
 }
 
+/// A component that renders a link to a route.
+///
+/// `Link` components are just [`<a>`](https://www.w3schools.com/tags/tag_a.asp) elements
+/// that link to different pages *within* your single-page app.
+///
+/// If you need to link to a resource outside of your app, then just use a regular
+/// `<a>` element directly.
+///
+/// # Examples
+///
+/// ```rust, ignore
+/// fn Header(cx: Scope) -> Element {
+///     cx.render(rsx!{
+///         Link { to: "/home", "Go Home" }
+///     })
+/// }
+/// ```
 pub fn Link<'a>(cx: Scope<'a, LinkProps<'a>>) -> Element {
-    if let Some(service) = cx.consume_context::<RouterService>() {
-        let LinkProps {
-            to,
-            href,
-            class,
-            id,
-            title,
-            autodetect,
-            external,
-            new_tab,
-            children,
-            ..
-        } = cx.props;
+    let svc = cx.use_hook(|_| cx.consume_context::<Arc<RouterCore>>());
 
-        let is_http = to.starts_with("http") || to.starts_with("https");
-        let outerlink = (*autodetect && is_http) || *external;
+    let LinkProps {
+        to,
+        class,
+        id,
+        title,
+        autodetect,
+        external,
+        new_tab,
+        children,
+        ..
+    } = cx.props;
 
-        let prevent_default = if outerlink { "" } else { "onclick" };
+    let is_http = to.starts_with("http") || to.starts_with("https");
+    let outerlink = (*autodetect && is_http) || *external;
+    let prevent_default = if outerlink { "" } else { "onclick" };
 
-        return cx.render(rsx! {
-            a {
-                href: "{to}",
-                class: format_args!("{}", class.unwrap_or("")),
-                id: format_args!("{}", id.unwrap_or("")),
-                title: format_args!("{}", title.unwrap_or("")),
-                prevent_default: "{prevent_default}",
-                target: format_args!("{}", if *new_tab { "_blank" } else { "" }),
-                onclick: move |_| {
-                    if !outerlink {
-                        service.push_route(to);
+    cx.render(rsx! {
+        a {
+            href: "{to}",
+            class: format_args!("{}", class.unwrap_or("")),
+            id: format_args!("{}", id.unwrap_or("")),
+            title: format_args!("{}", title.unwrap_or("")),
+            prevent_default: "{prevent_default}",
+            target: format_args!("{}", if *new_tab { "_blank" } else { "" }),
+            onclick: move |_| {
+                if !outerlink {
+                    if let Some(service) = svc {
+                        service.push_route(to, cx.props.title.map(|f| f.to_string()), None);
+                    } else {
+                        log::error!(
+                            "Attempted to create a Link to {} outside of a Router context",
+                            cx.props.to,
+                        );
                     }
-                },
-
-                &cx.props.children
-            }
-        });
-    }
-    log::warn!(
-        "Attempted to create a Link to {} outside of a Router context",
-        cx.props.to,
-    );
-    None
+                }
+            },
+            children
+        }
+    })
 }

packages/router/src/components/redirect.rs

@@ -0,0 +1,54 @@
+use dioxus_core as dioxus;
+use dioxus_core::prelude::*;
+use dioxus_core_macro::Props;
+
+use crate::use_router;
+
+/// The props for the [`Router`](fn.Router.html) component.
+#[derive(Props)]
+pub struct RedirectProps<'a> {
+    /// The route to link to. This can be a relative path, or a full URL.
+    ///
+    /// ```rust, ignore
+    /// // Absolute path
+    /// Redirect { from: "", to: "/home" }
+    ///
+    /// // Relative path
+    /// Redirect { from: "", to: "../" }
+    /// ```
+    pub to: &'a str,
+
+    /// The route to link from. This can be a relative path, or a full URL.
+    ///
+    /// ```rust, ignore
+    /// // Absolute path
+    /// Redirect { from: "", to: "/home" }
+    ///
+    /// // Relative path
+    /// Redirect { from: "", to: "../" }
+    /// ```
+    #[props(optional)]
+    pub from: Option<&'a str>,
+}
+
+/// If this component is rendered, it will redirect the user to the given route.
+///
+/// It will replace the current route rather than pushing the current one to the stack.
+pub fn Redirect<'a>(cx: Scope<'a, RedirectProps<'a>>) -> Element {
+    let router = use_router(&cx);
+
+    let immediate_redirect = cx.use_hook(|_| {
+        if let Some(from) = cx.props.from {
+            router.register_total_route(from.to_string(), cx.scope_id());
+            false
+        } else {
+            true
+        }
+    });
+
+    if *immediate_redirect || router.should_render(cx.scope_id()) {
+        router.replace_route(cx.props.to, None, None);
+    }
+
+    None
+}

packages/router/src/components/route.rs

@@ -1,4 +1,4 @@
-use dioxus_core::Element;
+use std::sync::Arc;
 
 use dioxus_core as dioxus;
 use dioxus_core::prelude::*;
@@ -6,31 +6,42 @@ use dioxus_core_macro::Props;
 use dioxus_core_macro::*;
 use dioxus_html as dioxus_elements;
 
-use crate::{RouteContext, RouterService};
+use crate::{RouteContext, RouterCore};
 
+/// Props for the [`Route`](struct.Route.html) component.
 #[derive(Props)]
 pub struct RouteProps<'a> {
-    to: &'a str,
+    /// The path to match.
+    pub to: &'a str,
 
-    children: Element<'a>,
-
-    #[props(default)]
-    fallback: bool,
+    /// The component to render when the path matches.
+    pub children: Element<'a>,
 }
 
+/// A component that conditionally renders children based on the current location.
+///
+/// # Example
+///
+///```rust, ignore
+/// rsx!(
+///     Router {
+///         Route { to: "/home", Home {} }
+///         Route { to: "/about", About {} }
+///         Route { to: "/Blog", Blog {} }
+///     }
+/// )
+/// ```
 pub fn Route<'a>(cx: Scope<'a, RouteProps<'a>>) -> Element {
-    // now we want to submit
     let router_root = cx
-        .use_hook(|_| cx.consume_context::<RouterService>())
+        .use_hook(|_| cx.consume_context::<Arc<RouterCore>>())
         .as_ref()?;
 
     cx.use_hook(|_| {
         // create a bigger, better, longer route if one above us exists
         let total_route = match cx.consume_context::<RouteContext>() {
-            Some(ctx) => ctx.total_route.to_string(),
+            Some(ctx) => ctx.total_route,
             None => cx.props.to.to_string(),
         };
-        // log::trace!("total route for {} is {}", cx.props.to, total_route);
 
         // provide our route context
         let route_context = cx.provide_context(RouteContext {
@@ -39,28 +50,15 @@ pub fn Route<'a>(cx: Scope<'a, RouteProps<'a>>) -> Element {
         });
 
         // submit our rout
-        router_root.register_total_route(
-            route_context.total_route.clone(),
-            cx.scope_id(),
-            cx.props.fallback,
-        );
-
-        Some(RouteInner {})
+        router_root.register_total_route(route_context.total_route, cx.scope_id());
     });
 
-    // log::trace!("Checking route {}", cx.props.to);
-
+    log::debug!("Checking Route: {:?}", cx.props.to);
     if router_root.should_render(cx.scope_id()) {
+        log::debug!("Route should render: {:?}", cx.scope_id());
         cx.render(rsx!(&cx.props.children))
     } else {
+        log::debug!("Route should *not* render: {:?}", cx.scope_id());
         None
     }
 }
-
-struct RouteInner {}
-
-impl Drop for RouteInner {
-    fn drop(&mut self) {
-        // todo!()
-    }
-}

packages/router/src/components/router.rs

@@ -1,35 +1,119 @@
-use dioxus_core::Element;
-
+use crate::ParsedRoute;
+use crate::{cfg::RouterCfg, RouteEvent, RouterCore};
 use dioxus_core as dioxus;
 use dioxus_core::prelude::*;
 use dioxus_core_macro::*;
 use dioxus_html as dioxus_elements;
+use futures_util::stream::StreamExt;
+use std::sync::Arc;
 
-use crate::RouterService;
-
+/// The props for the [`Router`](fn.Router.html) component.
 #[derive(Props)]
 pub struct RouterProps<'a> {
-    children: Element<'a>,
+    /// The routes and elements that should be rendered when the path matches.
+    ///
+    /// If elements are not contained within Routes, the will be rendered
+    /// regardless of the path.
+    pub children: Element<'a>,
+
+    /// The URL to point at
+    ///
+    /// This will be used to trim any latent segments from the URL when your app is
+    /// not deployed to the root of the domain.
+    #[props(optional)]
+    pub base_url: Option<&'a str>,
 
+    /// Hook into the router when the route is changed.
+    ///
+    /// This lets you easily implement redirects
     #[props(default)]
-    onchange: EventHandler<'a, String>,
+    pub onchange: EventHandler<'a, Arc<RouterCore>>,
 }
 
+/// A component that conditionally renders children based on the current location of the app.
+///
+/// Uses BrowserRouter in the browser and HashRouter everywhere else.
+///
+/// Will fallback to HashRouter is BrowserRouter is not available, or through configuration.
 #[allow(non_snake_case)]
 pub fn Router<'a>(cx: Scope<'a, RouterProps<'a>>) -> Element {
-    log::debug!("running router {:?}", cx.scope_id());
     let svc = cx.use_hook(|_| {
-        let update = cx.schedule_update_any();
-        cx.provide_context(RouterService::new(update, cx.scope_id()))
-    });
+        let (tx, mut rx) = futures_channel::mpsc::unbounded::<RouteEvent>();
+
+        let base_url = cx.props.base_url.map(|s| s.to_string());
+
+        let svc = RouterCore::new(tx, RouterCfg { base_url });
+
+        cx.spawn({
+            let svc = svc.clone();
+            let regen_route = cx.schedule_update_any();
+            let router_id = cx.scope_id();
+
+            async move {
+                while let Some(msg) = rx.next().await {
+                    match msg {
+                        RouteEvent::Push {
+                            route,
+                            serialized_state,
+                            title,
+                        } => {
+                            let new_route = Arc::new(ParsedRoute {
+                                url: svc.current_location().url.join(&route).ok().unwrap(),
+                                title,
+                                serialized_state,
+                            });
+
+                            svc.history.push(&new_route);
+                            svc.stack.borrow_mut().push(new_route);
+                        }
+
+                        RouteEvent::Replace {
+                            route,
+                            title,
+                            serialized_state,
+                        } => {
+                            let new_route = Arc::new(ParsedRoute {
+                                url: svc.current_location().url.join(&route).ok().unwrap(),
+                                title,
+                                serialized_state,
+                            });
 
-    let any_pending = svc.pending_events.borrow().len() > 0;
-    svc.pending_events.borrow_mut().clear();
+                            svc.history.replace(&new_route);
+                            *svc.stack.borrow_mut().last_mut().unwrap() = new_route;
+                        }
+
+                        RouteEvent::Pop => {
+                            let mut stack = svc.stack.borrow_mut();
+
+                            if stack.len() == 1 {
+                                continue;
+                            }
+
+                            stack.pop();
+                        }
+                    }
+
+                    svc.route_found.set(None);
+
+                    regen_route(router_id);
+
+                    for listener in svc.onchange_listeners.borrow().iter() {
+                        regen_route(*listener);
+                    }
+
+                    for route in svc.slots.borrow().keys() {
+                        regen_route(*route);
+                    }
+                }
+            }
+        });
+
+        cx.provide_context(svc)
+    });
 
-    if any_pending {
-        let location = svc.current_location();
-        let path = location.path();
-        cx.props.onchange.call(path.to_string());
+    // next time we run the rout_found will be filled
+    if svc.route_found.get().is_none() {
+        cx.props.onchange.call(svc.clone());
     }
 
     cx.render(rsx!(&cx.props.children))

packages/router/src/hooks/use_route.rs

@@ -1,114 +1,123 @@
+use crate::{ParsedRoute, RouteContext, RouterCore, RouterService};
 use dioxus_core::{ScopeId, ScopeState};
-use gloo::history::{HistoryResult, Location};
-use serde::de::DeserializeOwned;
-use std::{rc::Rc, str::FromStr};
+use std::{borrow::Cow, str::FromStr, sync::Arc};
+use url::Url;
 
-use crate::RouterService;
+/// This hook provides access to information about the current location in the
+/// context of a [`Router`]. If this function is called outside of a `Router`
+/// component it will panic.
+pub fn use_route(cx: &ScopeState) -> &UseRoute {
+    let handle = cx.use_hook(|_| {
+        let router = cx
+            .consume_context::<RouterService>()
+            .expect("Cannot call use_route outside the scope of a Router component");
+
+        let route_context = cx
+            .consume_context::<RouteContext>()
+            .expect("Cannot call use_route outside the scope of a Router component");
+
+        router.subscribe_onchange(cx.scope_id());
+
+        UseRouteListener {
+            state: UseRoute {
+                route_context,
+                route: router.current_location(),
+            },
+            router,
+            scope: cx.scope_id(),
+        }
+    });
+
+    handle.state.route = handle.router.current_location();
+
+    &handle.state
+}
 
-/// This struct provides is a wrapper around the internal router
-/// implementation, with methods for getting information about the current
-/// route.
-#[derive(Clone)]
+/// A handle to the current location of the router.
 pub struct UseRoute {
-    router: Rc<RouterService>,
+    pub(crate) route: Arc<ParsedRoute>,
+    pub(crate) route_context: RouteContext,
 }
 
 impl UseRoute {
-    /// This method simply calls the [`Location::query`] method.
-    pub fn query<T>(&self) -> HistoryResult<T>
-    where
-        T: DeserializeOwned,
-    {
-        self.current_location().query::<T>()
+    /// Get the underlying [`Url`] of the current location.
+    pub fn url(&self) -> &Url {
+        &self.route.url
+    }
+
+    /// Get the first query parameter given the parameter name.
+    ///
+    /// If you need to get more than one parameter, use [`query_pairs`] on the [`Url`] instead.
+    #[cfg(feature = "query")]
+    pub fn query<T: serde::de::DeserializeOwned>(&self) -> Option<T> {
+        let query = self.url().query()?;
+        serde_urlencoded::from_str(query.strip_prefix('?').unwrap_or("")).ok()
+    }
+
+    /// Get the first query parameter given the parameter name.
+    ///
+    /// If you need to get more than one parameter, use [`query_pairs`] on the [`Url`] instead.
+    pub fn query_param(&self, param: &str) -> Option<Cow<str>> {
+        self.route
+            .url
+            .query_pairs()
+            .find(|(k, _)| k == param)
+            .map(|(_, v)| v)
     }
 
     /// Returns the nth segment in the path. Paths that end with a slash have
     /// the slash removed before determining the segments. If the path has
     /// fewer segments than `n` then this method returns `None`.
-    pub fn nth_segment(&self, n: usize) -> Option<String> {
-        let mut segments = self.path_segments();
-        let len = segments.len();
-        if len - 1 < n {
-            return None;
-        }
-        Some(segments.remove(n))
+    pub fn nth_segment(&self, n: usize) -> Option<&str> {
+        self.route.url.path_segments()?.nth(n)
     }
 
     /// Returns the last segment in the path. Paths that end with a slash have
     /// the slash removed before determining the segments. The root path, `/`,
     /// will return an empty string.
-    pub fn last_segment(&self) -> String {
-        let mut segments = self.path_segments();
-        segments.remove(segments.len() - 1)
+    pub fn last_segment(&self) -> Option<&str> {
+        self.route.url.path_segments()?.last()
     }
 
     /// Get the named parameter from the path, as defined in your router. The
     /// value will be parsed into the type specified by `T` by calling
     /// `value.parse::<T>()`. This method returns `None` if the named
     /// parameter does not exist in the current path.
-    pub fn segment<T>(&self, name: &str) -> Option<Result<T, T::Err>>
-    where
-        T: FromStr,
-    {
-        self.router
-            .current_path_params()
-            .get(name)
-            .and_then(|v| Some(v.parse::<T>()))
-    }
+    pub fn segment(&self, name: &str) -> Option<&str> {
+        let index = self
+            .route_context
+            .total_route
+            .trim_start_matches('/')
+            .split('/')
+            .position(|segment| segment.starts_with(':') && &segment[1..] == name)?;
 
-    /// Returns the [Location] for the current route.
-    pub fn current_location(&self) -> Location {
-        self.router.current_location()
+        self.route.url.path_segments()?.nth(index)
     }
 
-    fn path_segments(&self) -> Vec<String> {
-        let location = self.router.current_location();
-        let path = location.path();
-        if path == "/" {
-            return vec![String::new()];
-        }
-        let stripped = &location.path()[1..];
-        stripped.split('/').map(str::to_string).collect::<Vec<_>>()
+    /// Get the named parameter from the path, as defined in your router. The
+    /// value will be parsed into the type specified by `T` by calling
+    /// `value.parse::<T>()`. This method returns `None` if the named
+    /// parameter does not exist in the current path.
+    pub fn parse_segment<T>(&self, name: &str) -> Option<Result<T, T::Err>>
+    where
+        T: FromStr,
+    {
+        self.segment(name).map(|value| value.parse::<T>())
     }
 }
 
-/// This hook provides access to information about the current location in the
-/// context of a [`Router`]. If this function is called outside of a `Router`
-/// component it will panic.
-pub fn use_route(cx: &ScopeState) -> &UseRoute {
-    &cx.use_hook(|_| {
-        let router = cx
-            .consume_context::<RouterService>()
-            .expect("Cannot call use_route outside the scope of a Router component");
-
-        router.subscribe_onchange(cx.scope_id());
-
-        UseRouteListener {
-            router: UseRoute { router },
-            scope: cx.scope_id(),
-        }
-    })
-    .router
-}
-
 // The entire purpose of this struct is to unubscribe this component when it is unmounted.
 // The UseRoute can be cloned into async contexts, so we can't rely on its drop to unubscribe.
 // Instead, we hide the drop implementation on this private type exclusive to the hook,
 // and reveal our cached version of UseRoute to the component.
 struct UseRouteListener {
-    router: UseRoute,
+    state: UseRoute,
+    router: Arc<RouterCore>,
     scope: ScopeId,
 }
+
 impl Drop for UseRouteListener {
     fn drop(&mut self) {
-        self.router.router.unsubscribe_onchange(self.scope)
+        self.router.unsubscribe_onchange(self.scope)
     }
 }
-
-/// This hook provides access to the `RouterService` for the app.
-pub fn use_router(cx: &ScopeState) -> &Rc<RouterService> {
-    cx.use_hook(|_| {
-        cx.consume_context::<RouterService>()
-            .expect("Cannot call use_route outside the scope of a Router component")
-    })
-}

packages/router/src/hooks/use_router.rs

@@ -0,0 +1,10 @@
+use crate::RouterService;
+use dioxus_core::ScopeState;
+
+/// This hook provides access to the `RouterService` for the app.
+pub fn use_router(cx: &ScopeState) -> &RouterService {
+    cx.use_hook(|_| {
+        cx.consume_context::<RouterService>()
+            .expect("Cannot call use_route outside the scope of a Router component")
+    })
+}

packages/router/src/lib.rs

@@ -1,41 +1,32 @@
-#![allow(warnings)]
-//! Dioxus-Router
-//!
-//! A simple match-based router and router service for most routing needs.
-//!
-//! Dioxus-Router is not a *declarative* router. Instead it uses a simple parse-match
-//! pattern which can be derived via a macro.
-//!
-//! ```rust
-//! fn app(cx: Scope) -> Element {
-//!     
-//! }
-//! ```
+#![doc = include_str!("../README.md")]
+#![warn(missing_docs)]
 
 mod hooks {
     mod use_route;
+    mod use_router;
     pub use use_route::*;
+    pub use use_router::*;
 }
 pub use hooks::*;
 
 mod components {
     #![allow(non_snake_case)]
 
-    mod router;
-    pub use router::*;
-
+    mod link;
+    mod redirect;
     mod route;
-    pub use route::*;
+    mod router;
 
-    mod link;
     pub use link::*;
+    pub use redirect::*;
+    pub use route::*;
+    pub use router::*;
 }
 pub use components::*;
 
-mod platform;
+mod cfg;
 mod routecontext;
 mod service;
-mod utils;
 
 pub use routecontext::*;
 pub use service::*;

packages/router/src/platform/mod.rs

@@ -1,4 +0,0 @@
-pub trait RouterProvider {
-    fn get_current_route(&self) -> String;
-    fn listen(&self, callback: Box<dyn Fn()>);
-}

packages/router/src/platform/web.rs

@@ -1,125 +0,0 @@
-use web_sys::{window, Event};
-pub struct RouterService<R: Routable> {
-    historic_routes: Vec<R>,
-    history_service: RefCell<web_sys::History>,
-    base_ur: RefCell<Option<String>>,
-}
-
-impl<R: Routable> RouterService<R> {
-    fn push_route(&self, r: R) {
-        todo!()
-        // self.historic_routes.borrow_mut().push(r);
-    }
-
-    fn get_current_route(&self) -> &str {
-        todo!()
-    }
-
-    fn update_route_impl(&self, url: String, push: bool) {
-        let history = web_sys::window().unwrap().history().expect("no history");
-        let base = self.base_ur.borrow();
-        let path = match base.as_ref() {
-            Some(base) => {
-                let path = format!("{}{}", base, url);
-                if path.is_empty() {
-                    "/".to_string()
-                } else {
-                    path
-                }
-            }
-            None => url,
-        };
-
-        if push {
-            history
-                .push_state_with_url(&JsValue::NULL, "", Some(&path))
-                .expect("push history");
-        } else {
-            history
-                .replace_state_with_url(&JsValue::NULL, "", Some(&path))
-                .expect("replace history");
-        }
-        let event = Event::new("popstate").unwrap();
-
-        web_sys::window()
-            .unwrap()
-            .dispatch_event(&event)
-            .expect("dispatch");
-    }
-}
-
-pub fn use_router_service<R: Routable>(cx: &ScopeState) -> Option<&Rc<RouterService<R>>> {
-    cx.use_hook(|_| cx.consume_state::<RouterService<R>>())
-        .as_ref()
-}
-
-/// This hould only be used once per app
-///
-/// You can manually parse the route if you want, but the derived `parse` method on `Routable` will also work just fine
-pub fn use_router<R: Routable>(cx: &ScopeState, mut parse: impl FnMut(&str) -> R + 'static) -> &R {
-    // for the web, attach to the history api
-    let state = cx.use_hook(
-        #[cfg(not(feature = "web"))]
-        |_| {},
-        #[cfg(feature = "web")]
-        |f| {
-            //
-            use gloo::events::EventListener;
-
-            let base = window()
-                .unwrap()
-                .document()
-                .unwrap()
-                .query_selector("base[href]")
-                .ok()
-                .flatten()
-                .and_then(|base| {
-                    let base = JsCast::unchecked_into::<web_sys::HtmlBaseElement>(base).href();
-                    let url = web_sys::Url::new(&base).unwrap();
-
-                    if url.pathname() != "/" {
-                        Some(strip_slash_suffix(&base).to_string())
-                    } else {
-                        None
-                    }
-                });
-
-            let location = window().unwrap().location();
-            let pathname = location.pathname().unwrap();
-            let initial_route = parse(&pathname);
-
-            let service: RouterService<R> = RouterService {
-                historic_routes: vec![initial_route],
-                history_service: RefCell::new(
-                    web_sys::window().unwrap().history().expect("no history"),
-                ),
-                base_ur: RefCell::new(base),
-            };
-
-            // let base = base_url();
-            // let url = route.to_path();
-            // pending_routes: RefCell::new(vec![]),
-            // service.history_service.push_state(data, title);
-
-            // cx.provide_state(service);
-
-            let regenerate = cx.schedule_update();
-
-            // // when "back" is called by the user, we want to to re-render the component
-            let listener = EventListener::new(&web_sys::window().unwrap(), "popstate", move |_| {
-                //
-                regenerate();
-            });
-
-            service
-        },
-    );
-
-    let base = state.base_ur.borrow();
-    if let Some(base) = base.as_ref() {
-        let path = format!("{}{}", base, state.get_current_route());
-    }
-
-    let history = state.history_service.borrow();
-    state.historic_routes.last().unwrap()
-}

packages/router/src/routecontext.rs

@@ -1,7 +1,24 @@
+/// A `RouteContext` is a context that is provided by [`Route`](fn.Route.html) components.
+///
+/// This signals to all child [`Route`] and [`Link`] components that they are
+/// currently nested under this route.
+#[derive(Debug, Clone)]
 pub struct RouteContext {
-    // "/name/:id"
+    /// The `declared_route` is the sub-piece of the route that matches this pattern.
+    ///
+    ///
+    /// It follows this pattern:
+    /// ```ignore
+    /// "name/:id"
+    /// ```
     pub declared_route: String,
 
-    // "app/name/:id"
+    /// The `total_route` is the full route that matches this pattern.
+    ///
+    ///
+    /// It follows this pattern:
+    /// ```ignore
+    /// "/level0/level1/:id"
+    /// ```
     pub total_route: String,
 }

packages/router/src/service.rs

@@ -1,153 +1,197 @@
-use gloo::history::{BrowserHistory, History, HistoryListener, Location};
+// todo: how does router work in multi-window contexts?
+// does each window have its own router? probably, lol
+
+use crate::cfg::RouterCfg;
+use dioxus_core::ScopeId;
+use futures_channel::mpsc::UnboundedSender;
+use std::any::Any;
 use std::{
-    cell::{Cell, Ref, RefCell},
+    cell::{Cell, RefCell},
     collections::{HashMap, HashSet},
     rc::Rc,
     sync::Arc,
 };
+use url::Url;
+
+/// An abstraction over the platform's history API.
+///
+/// The history is denoted using web-like semantics, with forward slashes delmitiing
+/// routes and question marks denoting optional parameters.
+///
+/// This RouterService is exposed so you can modify the history directly. It
+/// does not provide a high-level ergonomic API for your components. Instead,
+/// you should consider using the components and hooks instead.
+/// - [`Route`](struct.Route.html)
+/// - [`Link`](struct.Link.html)
+/// - [`UseRoute`](struct.UseRoute.html)
+/// - [`Router`](struct.Router.html)
+///
+///
+/// # Example
+///
+/// ```rust, ignore
+/// let router = Router::new();
+/// router.push_route("/home/custom");
+/// cx.provide_context(router);
+/// ```
+///
+/// # Platform Specific
+///
+/// - On the web, this is a [`BrowserHistory`](https://docs.rs/gloo/0.3.0/gloo/history/struct.BrowserHistory.html).
+/// - On desktop, mobile, and SSR, this is just a Vec of Strings. Currently on
+///   desktop, there is no way to tap into forward/back for the app unless explicitly set.
+pub struct RouterCore {
+    pub(crate) route_found: Cell<Option<ScopeId>>,
+
+    pub(crate) stack: RefCell<Vec<Arc<ParsedRoute>>>,
+
+    pub(crate) tx: UnboundedSender<RouteEvent>,
+
+    pub(crate) slots: Rc<RefCell<HashMap<ScopeId, String>>>,
+
+    pub(crate) onchange_listeners: Rc<RefCell<HashSet<ScopeId>>>,
+
+    pub(crate) history: Box<dyn RouterProvider>,
+
+    pub(crate) cfg: RouterCfg,
+}
 
-use dioxus_core::ScopeId;
-
-use crate::platform::RouterProvider;
+/// A shared type for the RouterCore.
+pub type RouterService = Arc<RouterCore>;
 
-pub struct RouterService {
-    pub(crate) regen_route: Arc<dyn Fn(ScopeId)>,
-    pub(crate) pending_events: Rc<RefCell<Vec<RouteEvent>>>,
-    slots: Rc<RefCell<Vec<(ScopeId, String)>>>,
-    onchange_listeners: Rc<RefCell<HashSet<ScopeId>>>,
-    root_found: Rc<Cell<Option<ScopeId>>>,
-    cur_path_params: Rc<RefCell<HashMap<String, String>>>,
+/// A route is a combination of window title, saved state, and a URL.
+#[derive(Debug, Clone)]
+pub struct ParsedRoute {
+    /// The URL of the route.
+    pub url: Url,
 
-    // history: Rc<dyn RouterProvider>,
-    history: Rc<RefCell<BrowserHistory>>,
-    listener: HistoryListener,
-}
+    /// The title of the route.
+    pub title: Option<String>,
 
-pub enum RouteEvent {
-    Change,
-    Pop,
-    Push,
+    /// The serialized state of the route.
+    pub serialized_state: Option<String>,
 }
 
-enum RouteSlot {
-    Routes {
-        // the partial route
-        partial: String,
-
-        // the total route
-        total: String,
-
-        // Connections to other routs
-        rest: Vec<RouteSlot>,
+#[derive(Debug)]
+pub(crate) enum RouteEvent {
+    Push {
+        route: String,
+        title: Option<String>,
+        serialized_state: Option<String>,
+    },
+    Replace {
+        route: String,
+        title: Option<String>,
+        serialized_state: Option<String>,
     },
+    Pop,
 }
 
-impl RouterService {
-    pub fn new(regen_route: Arc<dyn Fn(ScopeId)>, root_scope: ScopeId) -> Self {
-        let history = BrowserHistory::default();
-        let location = history.location();
-        let path = location.path();
-
-        let onchange_listeners = Rc::new(RefCell::new(HashSet::new()));
-        let slots: Rc<RefCell<Vec<(ScopeId, String)>>> = Default::default();
-        let pending_events: Rc<RefCell<Vec<RouteEvent>>> = Default::default();
-        let root_found = Rc::new(Cell::new(None));
-
-        let listener = history.listen({
-            let pending_events = pending_events.clone();
-            let regen_route = regen_route.clone();
-            let root_found = root_found.clone();
-            let slots = slots.clone();
-            let onchange_listeners = onchange_listeners.clone();
-            move || {
-                root_found.set(None);
-                // checking if the route is valid is cheap, so we do it
-                for (slot, root) in slots.borrow_mut().iter().rev() {
-                    regen_route(*slot);
-                }
-
-                for listener in onchange_listeners.borrow_mut().iter() {
-                    regen_route(*listener);
-                }
-
-                // also regenerate the root
-                regen_route(root_scope);
-
-                pending_events.borrow_mut().push(RouteEvent::Change)
-            }
-        });
-
-        Self {
-            listener,
-            root_found,
-            history: Rc::new(RefCell::new(history)),
-            regen_route,
-            slots,
-            pending_events,
-            onchange_listeners,
-            cur_path_params: Rc::new(RefCell::new(HashMap::new())),
-        }
+impl RouterCore {
+    pub(crate) fn new(tx: UnboundedSender<RouteEvent>, cfg: RouterCfg) -> Arc<Self> {
+        #[cfg(feature = "web")]
+        let history = Box::new(web::new(tx.clone()));
+
+        #[cfg(not(feature = "web"))]
+        let history = Box::new(hash::new());
+
+        let route = Arc::new(history.init_location());
+
+        Arc::new(Self {
+            cfg,
+            tx,
+            route_found: Cell::new(None),
+            stack: RefCell::new(vec![route]),
+            slots: Default::default(),
+            onchange_listeners: Default::default(),
+            history,
+        })
     }
 
-    pub fn push_route(&self, route: &str) {
-        self.history.borrow_mut().push(route);
+    /// Push a new route to the history.
+    ///
+    /// This will trigger a route change event.
+    ///
+    /// This does not modify the current route
+    pub fn push_route(&self, route: &str, title: Option<String>, serialized_state: Option<String>) {
+        let _ = self.tx.unbounded_send(RouteEvent::Push {
+            route: route.to_string(),
+            title,
+            serialized_state,
+        });
     }
 
-    pub fn register_total_route(&self, route: String, scope: ScopeId, fallback: bool) {
-        let clean = clean_route(route);
-        self.slots.borrow_mut().push((scope, clean));
+    /// Pop the current route from the history.
+    pub fn pop_route(&self) {
+        let _ = self.tx.unbounded_send(RouteEvent::Pop);
     }
 
-    pub fn should_render(&self, scope: ScopeId) -> bool {
-        if let Some(root_id) = self.root_found.get() {
-            if root_id == scope {
-                return true;
-            }
-            return false;
-        }
-
-        let location = self.history.borrow().location();
-        let path = location.path();
-
-        let roots = self.slots.borrow();
-
-        let root = roots.iter().find(|(id, route)| id == &scope);
-
-        // fallback logic
-        match root {
-            Some((id, route)) => {
-                if let Some(params) = route_matches_path(route, path) {
-                    self.root_found.set(Some(*id));
-                    *self.cur_path_params.borrow_mut() = params;
-                    true
-                } else {
-                    if route == "" {
-                        self.root_found.set(Some(*id));
-                        true
-                    } else {
-                        false
-                    }
-                }
-            }
-            None => false,
-        }
+    /// Instead of pushing a new route, replaces the current route.
+    pub fn replace_route(
+        &self,
+        route: &str,
+        title: Option<String>,
+        serialized_state: Option<String>,
+    ) {
+        let _ = self.tx.unbounded_send(RouteEvent::Replace {
+            route: route.to_string(),
+            title,
+            serialized_state,
+        });
     }
 
-    pub fn current_location(&self) -> Location {
-        self.history.borrow().location().clone()
+    /// Get the current location of the Router
+    pub fn current_location(&self) -> Arc<ParsedRoute> {
+        self.stack.borrow().last().unwrap().clone()
     }
 
-    pub fn current_path_params(&self) -> Ref<HashMap<String, String>> {
-        self.cur_path_params.borrow()
+    /// Get the current native location of the Router
+    pub fn native_location<T: 'static>(&self) -> Option<Box<T>> {
+        self.history.native_location().downcast::<T>().ok()
     }
 
+    /// Registers a scope to regenerate on route change.
+    ///
+    /// This is useful if you've built some abstraction on top of the router service.
     pub fn subscribe_onchange(&self, id: ScopeId) {
         self.onchange_listeners.borrow_mut().insert(id);
     }
 
+    /// Unregisters a scope to regenerate on route change.
+    ///
+    /// This is useful if you've built some abstraction on top of the router service.
     pub fn unsubscribe_onchange(&self, id: ScopeId) {
         self.onchange_listeners.borrow_mut().remove(&id);
     }
+
+    pub(crate) fn register_total_route(&self, route: String, scope: ScopeId) {
+        let clean = clean_route(route);
+        self.slots.borrow_mut().insert(scope, clean);
+    }
+
+    pub(crate) fn should_render(&self, scope: ScopeId) -> bool {
+        if let Some(root_id) = self.route_found.get() {
+            return root_id == scope;
+        }
+
+        let roots = self.slots.borrow();
+
+        if let Some(route) = roots.get(&scope) {
+            if route_matches_path(
+                &self.current_location().url,
+                route,
+                self.cfg.base_url.as_ref(),
+            ) || route.is_empty()
+            {
+                self.route_found.set(Some(scope));
+                true
+            } else {
+                false
+            }
+        } else {
+            false
+        }
+    }
 }
 
 fn clean_route(route: String) -> String {
@@ -161,41 +205,159 @@ fn clean_path(path: &str) -> &str {
     if path == "/" {
         return path;
     }
-    path.trim_end_matches('/')
+    let sub = path.trim_end_matches('/');
+
+    if sub.starts_with('/') {
+        &path[1..]
+    } else {
+        sub
+    }
 }
 
-fn route_matches_path(route: &str, path: &str) -> Option<HashMap<String, String>> {
-    let route_pieces = route.split('/').collect::<Vec<_>>();
-    let path_pieces = clean_path(path).split('/').collect::<Vec<_>>();
+fn route_matches_path(cur: &Url, attempt: &str, base_url: Option<&String>) -> bool {
+    let cur_piece_iter = cur.path_segments().unwrap();
+
+    let cur_pieces = match base_url {
+        // baseurl is naive right now and doesn't support multiple nesting levels
+        Some(_) => cur_piece_iter.skip(1).collect::<Vec<_>>(),
+        None => cur_piece_iter.collect::<Vec<_>>(),
+    };
+
+    let attempt_pieces = clean_path(attempt).split('/').collect::<Vec<_>>();
 
-    if route_pieces.len() != path_pieces.len() {
-        return None;
+    if attempt == "/" && cur_pieces.len() == 1 && cur_pieces[0].is_empty() {
+        return true;
     }
 
-    let mut matches = HashMap::new();
-    for (i, r) in route_pieces.iter().enumerate() {
+    if attempt_pieces.len() != cur_pieces.len() {
+        return false;
+    }
+
+    for (i, r) in attempt_pieces.iter().enumerate() {
         // If this is a parameter then it matches as long as there's
         // _any_thing in that spot in the path.
         if r.starts_with(':') {
-            let param = &r[1..];
-            matches.insert(param.to_string(), path_pieces[i].to_string());
             continue;
         }
 
-        if path_pieces[i] != *r {
-            return None;
+        if cur_pieces[i] != *r {
+            return false;
         }
     }
 
-    Some(matches)
+    true
 }
 
-pub struct RouterCfg {
-    initial_route: String,
+pub(crate) trait RouterProvider {
+    fn push(&self, route: &ParsedRoute);
+    fn replace(&self, route: &ParsedRoute);
+    fn native_location(&self) -> Box<dyn Any>;
+    fn init_location(&self) -> ParsedRoute;
 }
 
-impl RouterCfg {
-    pub fn new(initial_route: String) -> Self {
-        Self { initial_route }
+#[cfg(not(feature = "web"))]
+mod hash {
+    use super::*;
+
+    pub fn new() -> HashRouter {
+        HashRouter {}
+    }
+
+    /// a simple cross-platform hash-based router
+    pub struct HashRouter {}
+
+    impl RouterProvider for HashRouter {
+        fn push(&self, _route: &ParsedRoute) {}
+
+        fn native_location(&self) -> Box<dyn Any> {
+            Box::new(())
+        }
+
+        fn init_location(&self) -> ParsedRoute {
+            ParsedRoute {
+                url: Url::parse("app:///").unwrap(),
+                title: None,
+                serialized_state: None,
+            }
+        }
+
+        fn replace(&self, _route: &ParsedRoute) {}
+    }
+}
+
+#[cfg(feature = "web")]
+mod web {
+    use super::RouterProvider;
+    use crate::{ParsedRoute, RouteEvent};
+
+    use futures_channel::mpsc::UnboundedSender;
+    use gloo_events::EventListener;
+    use std::any::Any;
+    use web_sys::History;
+
+    pub struct WebRouter {
+        // keep it around so it drops when the router is dropped
+        _listener: gloo_events::EventListener,
+
+        window: web_sys::Window,
+        history: History,
+    }
+
+    impl RouterProvider for WebRouter {
+        fn push(&self, route: &ParsedRoute) {
+            let ParsedRoute {
+                url,
+                title,
+                serialized_state,
+            } = route;
+
+            let _ = self.history.push_state_with_url(
+                &wasm_bindgen::JsValue::from_str(serialized_state.as_deref().unwrap_or("")),
+                title.as_deref().unwrap_or(""),
+                Some(url.as_str()),
+            );
+        }
+
+        fn replace(&self, route: &ParsedRoute) {
+            let ParsedRoute {
+                url,
+                title,
+                serialized_state,
+            } = route;
+
+            let _ = self.history.replace_state_with_url(
+                &wasm_bindgen::JsValue::from_str(serialized_state.as_deref().unwrap_or("")),
+                title.as_deref().unwrap_or(""),
+                Some(url.as_str()),
+            );
+        }
+
+        fn native_location(&self) -> Box<dyn Any> {
+            Box::new(self.window.location())
+        }
+
+        fn init_location(&self) -> ParsedRoute {
+            ParsedRoute {
+                url: url::Url::parse(&web_sys::window().unwrap().location().href().unwrap())
+                    .unwrap(),
+                title: web_sys::window()
+                    .unwrap()
+                    .document()
+                    .unwrap()
+                    .title()
+                    .into(),
+                serialized_state: None,
+            }
+        }
+    }
+
+    pub(crate) fn new(tx: UnboundedSender<RouteEvent>) -> WebRouter {
+        WebRouter {
+            history: web_sys::window().unwrap().history().unwrap(),
+            window: web_sys::window().unwrap(),
+            _listener: EventListener::new(&web_sys::window().unwrap(), "popstate", move |_| {
+                let _ = tx.unbounded_send(RouteEvent::Pop);
+            }),
+        }
     }
 }

packages/router/src/utils.rs

@@ -1,6 +0,0 @@
-// use wasm_bindgen::JsCast;
-// use web_sys::window;
-
-pub(crate) fn strip_slash_suffix(path: &str) -> &str {
-    path.strip_suffix('/').unwrap_or(path)
-}

packages/router/tests/ssr_router.rs

@@ -0,0 +1,30 @@
+#![allow(non_snake_case)]
+
+use dioxus_core::prelude::*;
+use dioxus_core_macro::*;
+use dioxus_html as dioxus_elements;
+use dioxus_router::*;
+
+#[test]
+fn generates_without_error() {
+    let mut app = VirtualDom::new(app);
+    app.rebuild();
+
+    let out = dioxus_ssr::render_vdom(&app);
+
+    assert_eq!(out, "<nav>navbar</nav>default<!--placeholder-->");
+}
+
+fn app(cx: Scope) -> Element {
+    cx.render(rsx! {
+        Router {
+            nav { "navbar" }
+            Route { to: "/", "default" }
+            Route { to: "/home", Home {} }
+        }
+    })
+}
+
+fn Home(cx: Scope) -> Element {
+    cx.render(rsx! { h1 { "Home" } })
+}

packages/router/tests/route.rs → packages/router/tests/web_router.rs

@@ -21,7 +21,7 @@ fn simple_test() {
     static APP: Component = |cx| {
         cx.render(rsx! {
             Router {
-                onchange: move |route| log::info!("route changed to {}", route),
+                onchange: move |route: RouterService| log::info!("route changed to {:?}", route.current_location()),
                 Route { to: "/", Home {} }
                 Route { to: "blog"
                     Route { to: "/", BlogList {} }
@@ -48,7 +48,7 @@ fn simple_test() {
     }
 
     fn BlogPost(cx: Scope) -> Element {
-        let id = use_route(&cx).segment::<usize>("id")?;
+        let id = use_route(&cx).parse_segment::<usize>("id")?;
 
         cx.render(rsx! {
             div {

src/lib.rs

@@ -20,9 +20,6 @@ pub use dioxus_desktop as desktop;
 #[cfg(feature = "fermi")]
 pub use fermi;
 
-// #[cfg(feature = "mobile")]
-// pub use dioxus_mobile as mobile;
-
 pub mod events {
     #[cfg(feature = "html")]
     pub use dioxus_html::{on::*, KeyCode};
@@ -34,4 +31,10 @@ pub mod prelude {
     pub use dioxus_elements::{GlobalAttributes, SvgAttributes};
     pub use dioxus_hooks::*;
     pub use dioxus_html as dioxus_elements;
+
+    #[cfg(feature = "router")]
+    pub use dioxus_router::{use_route, use_router, Link, Redirect, Router, UseRoute};
+
+    #[cfg(feature = "fermi")]
+    pub use fermi::{use_atom_ref, use_init_atom_root, use_read, use_set, Atom, AtomRef};
 }

tests/sharedstate.rs

@@ -2,6 +2,7 @@
 
 use dioxus::prelude::*;
 use dioxus_core::{DomEdit, Mutations, SchedulerMsg, ScopeId};
+use std::rc::Rc;
 use DomEdit::*;
 
 mod test_logging;
@@ -11,12 +12,12 @@ fn shared_state_test() {
     struct MySharedState(&'static str);
 
     static App: Component = |cx| {
-        cx.provide_context(MySharedState("world!"));
+        cx.provide_context(Rc::new(MySharedState("world!")));
         cx.render(rsx!(Child {}))
     };
 
     static Child: Component = |cx| {
-        let shared = cx.consume_context::<MySharedState>()?;
+        let shared = cx.consume_context::<Rc<MySharedState>>()?;
         cx.render(rsx!("Hello, {shared.0}"))
     };
 
@@ -40,7 +41,7 @@ fn swap_test() {
         let val = cx.use_hook(|_| 0);
         *val += 1;
 
-        cx.provide_context(MySharedState("world!"));
+        cx.provide_context(Rc::new(MySharedState("world!")));
 
         let child = match *val % 2 {
             0 => rsx!(
@@ -71,7 +72,7 @@ fn swap_test() {
 
     #[inline_props]
     fn Child1<'a>(cx: Scope, children: Element<'a>) -> Element {
-        let shared = cx.consume_context::<MySharedState>().unwrap();
+        let shared = cx.consume_context::<Rc<MySharedState>>().unwrap();
         println!("Child1: {}", shared.0);
         cx.render(rsx! {
             div {
@@ -83,7 +84,7 @@ fn swap_test() {
 
     #[inline_props]
     fn Child2<'a>(cx: Scope, children: Element<'a>) -> Element {
-        let shared = cx.consume_context::<MySharedState>().unwrap();
+        let shared = cx.consume_context::<Rc<MySharedState>>().unwrap();
         println!("Child2: {}", shared.0);
         cx.render(rsx! {
             h1 {