From 5ececa4644142336f43d7a3a7cc8fe4ef1302848 Mon Sep 17 00:00:00 2001 From: Julius Lungys <32368314+voidpumpkin@users.noreply.github.com> Date: Sun, 20 Mar 2022 12:12:13 +0200 Subject: [PATCH] update nested router docs (#2535) * update nested router docs * !!! * fix according to comments * fix error --- website/docs/concepts/router.mdx | 34 +++++++++++++--------- website/static/img/nested-router-dark.svg | 6 ---- website/static/img/nested-router-light.svg | 6 ---- 3 files changed, 20 insertions(+), 26 deletions(-) diff --git a/website/docs/concepts/router.mdx b/website/docs/concepts/router.mdx index a426d4f8b65..bfb867a4e29 100644 --- a/website/docs/concepts/router.mdx +++ b/website/docs/concepts/router.mdx @@ -398,24 +398,32 @@ digraph { --> import useBaseUrl from "@docusaurus/useBaseUrl"; -import ThemedImage from '@theme/ThemedImage'; +import ThemedImage from "@theme/ThemedImage"; The nested `SettingsRouter` handles all urls that start with `/settings`. Additionally, it redirects urls that are not matched to the main `NotFound` route. So `/settings/gibberish` will redirect to `/404`. +:::caution + +Though note that this is still work in progress so the way we do this is not final + +::: + It can be implemented with the following code: ```rust use yew::prelude::*; use yew_router::prelude::*; +use gloo::utils::window; +use wasm_bindgen::UnwrapThrowExt; #[derive(Clone, Routable, PartialEq)] enum MainRoute { @@ -425,7 +433,9 @@ enum MainRoute { News, #[at("/contact")] Contact, - #[at("/settings/:s")] + #[at("/settings")] + SettingsRoot, + #[at("/settings/*")] Settings, #[not_found] #[at("/404")] @@ -434,7 +444,7 @@ enum MainRoute { #[derive(Clone, Routable, PartialEq)] enum SettingsRoute { - #[at("/settings/profile")] + #[at("/settings")] Profile, #[at("/settings/friends")] Friends, @@ -450,9 +460,7 @@ fn switch_main(route: &MainRoute) -> Html { MainRoute::Home => html! {

{"Home"}

}, MainRoute::News => html! {

{"News"}

}, MainRoute::Contact => html! {

{"Contact"}

}, - MainRoute::Settings => html! { - render={Switch::render(switch_settings)} /> - }, + MainRoute::SettingsRoot | MainRoute::Settings => html! { render={Switch::render(switch_settings)} /> }, MainRoute::NotFound => html! {

{"Not Found"}

}, } } @@ -462,9 +470,7 @@ fn switch_settings(route: &SettingsRoute) -> Html { SettingsRoute::Profile => html! {

{"Profile"}

}, SettingsRoute::Friends => html! {

{"Friends"}

}, SettingsRoute::Theme => html! {

{"Theme"}

}, - SettingsRoute::NotFound => html! { - to={MainRoute::NotFound}/> - } + SettingsRoute::NotFound => html! { to={MainRoute::NotFound}/>} } } diff --git a/website/static/img/nested-router-dark.svg b/website/static/img/nested-router-dark.svg index 56ac8e8e738..2cbf3a7bfb5 100644 --- a/website/static/img/nested-router-dark.svg +++ b/website/static/img/nested-router-dark.svg @@ -55,12 +55,6 @@ Not Found - - -SettingsNotFound->Not Found - - - Main Router diff --git a/website/static/img/nested-router-light.svg b/website/static/img/nested-router-light.svg index 5d2ef9517ab..2eb88ab68ee 100644 --- a/website/static/img/nested-router-light.svg +++ b/website/static/img/nested-router-light.svg @@ -55,12 +55,6 @@ Not Found - - -SettingsNotFound->Not Found - - - Main Router