From 6e66d6fe36ce1c0ad1f484dbadb738e62a717bef Mon Sep 17 00:00:00 2001 From: Norman Paniagua <204656+norman784@users.noreply.github.com> Date: Tue, 13 Sep 2022 22:09:00 +0200 Subject: [PATCH] Added initial_url to the router component (#510) * added active_url * renamed active_url to initial_url * updated docs --- packages/router/src/cfg.rs | 1 + packages/router/src/components/router.rs | 4 ++++ packages/router/src/service.rs | 15 ++++++++++++++- packages/router/usage.md | 22 +++++++++++++++------- 4 files changed, 34 insertions(+), 8 deletions(-) diff --git a/packages/router/src/cfg.rs b/packages/router/src/cfg.rs index 141b03133..78ecd7b0c 100644 --- a/packages/router/src/cfg.rs +++ b/packages/router/src/cfg.rs @@ -2,4 +2,5 @@ pub struct RouterCfg { pub base_url: Option, pub active_class: Option, + pub initial_url: Option, } diff --git a/packages/router/src/components/router.rs b/packages/router/src/components/router.rs index f8532ec4f..008197d0f 100644 --- a/packages/router/src/components/router.rs +++ b/packages/router/src/components/router.rs @@ -28,6 +28,9 @@ pub struct RouterProps<'a> { /// This is useful if you don't want to repeat the same `active_class` prop value in every Link. /// By default set to `"active"`. pub active_class: Option<&'a str>, + + /// Set the initial url. + pub initial_url: Option, } /// A component that conditionally renders children based on the current location of the app. @@ -43,6 +46,7 @@ pub fn Router<'a>(cx: Scope<'a, RouterProps<'a>>) -> Element { RouterCfg { base_url: cx.props.base_url.map(|s| s.to_string()), active_class: cx.props.active_class.map(|s| s.to_string()), + initial_url: cx.props.initial_url.clone(), }, )) }); diff --git a/packages/router/src/service.rs b/packages/router/src/service.rs index dcfa7024e..0f028383e 100644 --- a/packages/router/src/service.rs +++ b/packages/router/src/service.rs @@ -9,6 +9,7 @@ use std::{ cell::{Cell, RefCell}, collections::{HashMap, HashSet}, rc::Rc, + str::FromStr, sync::Arc, }; use url::Url; @@ -84,7 +85,19 @@ impl RouterCore { #[cfg(not(feature = "web"))] let history = Box::new(hash::new()); - let route = Arc::new(history.init_location()); + let route = match &cfg.initial_url { + Some(url) => Arc::new(ParsedRoute { + url: Url::from_str(&url).expect( + format!( + "RouterCfg expects a valid initial_url, but got '{}'. Example: '{{scheme}}://{{?authority}}/{{?path}}'", + &url + ).as_str() + ), + title: None, + serialized_state: None, + }), + None => Arc::new(history.init_location()), + }; let svc = Arc::new(Self { cfg, diff --git a/packages/router/usage.md b/packages/router/usage.md index d5bc67aa8..5fd5456d7 100644 --- a/packages/router/usage.md +++ b/packages/router/usage.md @@ -81,6 +81,20 @@ Router { } ``` +#### Initial url + +When working with ssr specially is crucial to have the ability to set an initial url. This is an optional property and defaults to `app:///` for desktop, mobile and ssr, and for web retrieves the url from the window current location. + +You must provide a valid URL `{scheme}://{?authority}/{?path}`. + +```rust +Router { + initial_url: "https://dioxuslab.com/blog", // Set the initial url. + Link { to: "/", "Home" }, + Link { to: "/blog", "Blog" }, // The router will render this route. +} +``` + ### Segments Each route in your app is comprised of segments and queries. Segments are the portions of the route delimited by forward slashes. @@ -125,12 +139,8 @@ fn BlogPost(cx: Scope) -> Element { } ``` - ### Queries - - - ### Listeners It's possible to connect to route change events from the router by attaching a listener to the Router's `onchange` parameter. This listener is guaranteed to run before any of your routes are matched, so you can perform redirects, add some logging, fetch some data, or do anything that you might want to be synchronous with clicks on Links. @@ -154,7 +164,6 @@ fn app() { } ``` - Listeners can also be attached downstream in your app with the `RouteListener` handler component: ```rust @@ -169,7 +178,6 @@ fn TitleCard(cx: Scope) -> Element { } ``` - ### Working with Github Pages and other static hosts Most "static" hosts will have issues with single-page-app (SPA) routers. To get around this, you can either generate an index.html for each route or hijack the 404 page. @@ -178,7 +186,7 @@ For generating a static index.html, see `Generating a Route List`. To hijack the 404 page, we can simply make a copy of our index.html page and call it 404.html. When Github Pages serves this 404 page, your app will be served instead and the router will render the right corresponding route. -https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-custom-404-page-for-your-github-pages-site + ### Generating a SiteMap or Route List