From ad4c3fc2987f65f493dfbe32d6a9c54260581a8a Mon Sep 17 00:00:00 2001 From: Sasa Cocic-Banjanac Date: Sat, 10 Dec 2022 21:01:43 +0800 Subject: [PATCH] Mention certain components must be children of Router (#2913) * Mention certain components must be children of Router * make suggested changes * fix typos * update documentation with suggested changes again * change /> to > in comment * add ticks to Link & Switch in concepts/router.mdx --- website/docs/concepts/router.mdx | 7 ++++--- .../version-0.19.0/concepts/router.mdx | 12 ++++++++---- .../versioned_docs/version-0.20/concepts/router.mdx | 7 ++++--- 3 files changed, 16 insertions(+), 10 deletions(-) diff --git a/website/docs/concepts/router.mdx b/website/docs/concepts/router.mdx index 407601caba7..3569d31e181 100644 --- a/website/docs/concepts/router.mdx +++ b/website/docs/concepts/router.mdx @@ -44,8 +44,9 @@ current URL and passes it to the `render` callback. The callback then decides wh matched, the router navigates to the path with `not_found` attribute. If no route is specified, nothing is rendered, and a message is logged to console stating that no route was matched. -Finally, you need to register one of the Router context provider components like ``. -It provides location information and navigator to its children. +Most of yew-router's components, in particular `` and ``, must be (grand-)children of one of the Router components +(e.g. ``). You usually only need a single Router in your app, most often rendered immediately by your most top-level `` +component. The Router registers a context, which is needed for Links and Switches to function. An example is shown below. :::caution When using `yew-router` in browser environment, `` is highly recommended. @@ -94,7 +95,7 @@ fn switch(routes: Route) -> Html { fn app() -> Html { html! { - render={switch} /> + render={switch} /> // <- must be child of } } diff --git a/website/versioned_docs/version-0.19.0/concepts/router.mdx b/website/versioned_docs/version-0.19.0/concepts/router.mdx index 02ba893f9a4..e92dcd1dc3b 100644 --- a/website/versioned_docs/version-0.19.0/concepts/router.mdx +++ b/website/versioned_docs/version-0.19.0/concepts/router.mdx @@ -42,10 +42,14 @@ current URL and passes it to the `render` callback. The callback then decides wh matched, the router navigates to the path with `not_found` attribute. If no route is specified, nothing is rendered, and a message is logged to console stating that no route was matched. -Finally, you need to register the `` component as a context. -`` provides session history information to its children. +Most of yew-router's components, in particular `` and ``, must be (grand-)children of one of the Router components +(e.g. ``). You usually only need a single Router in your app, most often rendered immediately by your most top-level `` +component. The Router registers a context, which is needed for Links and Switches to function. An example is shown below. -When using `yew-router` in browser environment, `` is recommended. +:::caution +When using `yew-router` in browser environment, `` is highly recommended. +You can find other router flavours in the [API Reference](https://docs.rs/yew-router/). +::: ```rust use yew_router::prelude::*; @@ -89,7 +93,7 @@ fn switch(routes: &Route) -> Html { fn app() -> Html { html! { - render={Switch::render(switch)} /> + render={Switch::render(switch)} /> // <- must be child of } } diff --git a/website/versioned_docs/version-0.20/concepts/router.mdx b/website/versioned_docs/version-0.20/concepts/router.mdx index c0a25fb205d..43bfafc0af6 100644 --- a/website/versioned_docs/version-0.20/concepts/router.mdx +++ b/website/versioned_docs/version-0.20/concepts/router.mdx @@ -44,8 +44,9 @@ current URL and passes it to the `render` callback. The callback then decides wh matched, the router navigates to the path with `not_found` attribute. If no route is specified, nothing is rendered, and a message is logged to console stating that no route was matched. -Finally, you need to register one of the Router context provider components like ``. -It provides location information and navigator to its children. +Most of yew-router's components, in particular `` and ``, must be (grand-)children of one of the Router components +(e.g. ``). You usually only need a single Router in your app, most often rendered immediately by your most top-level `` +component. The Router registers a context, which is needed for Links and Switches to function. An example is shown below. :::caution When using `yew-router` in browser environment, `` is highly recommended. @@ -94,7 +95,7 @@ fn switch(routes: Route) -> Html { fn app() -> Html { html! { - render={switch} /> + render={switch} /> // <- must be child of } }