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
This commit is contained in:
Sasa Cocic-Banjanac 2022-12-10 21:01:43 +08:00 committed by GitHub
parent 9e980a36b4
commit ad4c3fc298
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 10 deletions

View File

@ -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 `<BrowserRouter />`.
It provides location information and navigator to its children.
Most of yew-router's components, in particular `<Link />` and `<Switch />`, must be (grand-)children of one of the Router components
(e.g. `<BrowserRouter />`). You usually only need a single Router in your app, most often rendered immediately by your most top-level `<App />`
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, `<BrowserRouter />` is highly recommended.
@ -94,7 +95,7 @@ fn switch(routes: Route) -> Html {
fn app() -> Html {
html! {
<BrowserRouter>
<Switch<Route> render={switch} />
<Switch<Route> render={switch} /> // <- must be child of <BrowserRouter>
</BrowserRouter>
}
}

View File

@ -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 `<Router />` component as a context.
`<Router />` provides session history information to its children.
Most of yew-router's components, in particular `<Link />` and `<Switch />`, must be (grand-)children of one of the Router components
(e.g. `<BrowserRouter />`). You usually only need a single Router in your app, most often rendered immediately by your most top-level `<App />`
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, `<BrowserRouter />` is recommended.
:::caution
When using `yew-router` in browser environment, `<BrowserRouter />` 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! {
<BrowserRouter>
<Switch<Route> render={Switch::render(switch)} />
<Switch<Route> render={Switch::render(switch)} /> // <- must be child of <BrowserRouter>
</BrowserRouter>
}
}

View File

@ -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 `<BrowserRouter />`.
It provides location information and navigator to its children.
Most of yew-router's components, in particular `<Link />` and `<Switch />`, must be (grand-)children of one of the Router components
(e.g. `<BrowserRouter />`). You usually only need a single Router in your app, most often rendered immediately by your most top-level `<App />`
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, `<BrowserRouter />` is highly recommended.
@ -94,7 +95,7 @@ fn switch(routes: Route) -> Html {
fn app() -> Html {
html! {
<BrowserRouter>
<Switch<Route> render={switch} />
<Switch<Route> render={switch} /> // <- must be child of <BrowserRouter>
</BrowserRouter>
}
}