mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
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:
parent
9e980a36b4
commit
ad4c3fc298
@ -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>
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user