Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Router docs about set-only components #2214

Merged
merged 9 commits into from
Dec 5, 2021
6 changes: 1 addition & 5 deletions packages/yew-router/src/components/link.rs
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
use std::borrow::Cow;
use std::marker::PhantomData;

use serde::Serialize;
Expand Down Expand Up @@ -92,10 +91,7 @@ where
e.prevent_default();
Msg::OnClick
});
let href: AttrValue = match BrowserHistory::route_to_url(to) {
Cow::Owned(href) => href.into(),
Cow::Borrowed(href) => href.into(),
};
let href: AttrValue = BrowserHistory::route_to_url(to).into();
html! {
<a class={classes}
{href}
Expand Down
18 changes: 11 additions & 7 deletions website/docs/concepts/router.md
Original file line number Diff line number Diff line change
Expand Up @@ -232,14 +232,11 @@ pub fn my_component() -> Html {
}
```

:::tip
:::caution
The example here uses `Callback::once`. Use a normal callback if the target route can be the same with the route
the component is in. For example when you have a logo button on every page the that goes back to home when clicked,
clicking that button twice on home page causes the code to panic because the second click pushes an identical Home route
and won't trigger a re-render of the element.

In other words, only use `Callback::once` when you are sure the target route is different. Or use normal callbacks only
to be safe.
the component is in, or just to play safe. For example, when you have a logo button on every page, that goes back to
home when clicked, clicking that button twice on home page causes the code to panic because the second click pushes an
identical Home route and the `use_history` hook won't trigger a re-render.
:::

If you want to replace the current history instead of pushing a new history onto the stack, use `history.replace()`
Expand Down Expand Up @@ -289,6 +286,13 @@ pub fn nav_items() -> Html {
}
```

:::tip
This is a hack and a more idiomatic hook version will come in the future!
But if your component only needs to set the route without listening to the changes, instead of the `use_history`
hook, `BrowserHistory::default()` can be used to acquire the global history instance. The latter also works in non-threaded agent
environments (`Context` and `Job`).
:::

##### Struct Components

For struct components, the `AnyHistory` instance can be obtained through the `ctx.link().history()` API. The rest is
Expand Down