mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-11-26 06:00:21 +00:00
nonreactive examples for hooks were not compilable as written (#2337)
* nonreactive examples for hooks were not compilable as written * add example demonstrating the correct usage of use_resource w router * switch to readonlysignal in the router resource example * fix readonlysignal name --------- Co-authored-by: Evan Almloff <evanalmloff@gmail.com>
This commit is contained in:
parent
6320e00056
commit
7ee3dc41fc
1 changed files with 65 additions and 0 deletions
65
examples/router_resource.rs
Normal file
65
examples/router_resource.rs
Normal file
|
@ -0,0 +1,65 @@
|
||||||
|
//! Example: Updating components with use_resource
|
||||||
|
//! -----------------
|
||||||
|
//!
|
||||||
|
//! This example shows how to use use_reactive to update a component properly
|
||||||
|
//! when linking to it from the same component, when using use_resource
|
||||||
|
|
||||||
|
use dioxus::prelude::*;
|
||||||
|
|
||||||
|
#[derive(Clone, Routable, Debug, PartialEq)]
|
||||||
|
enum Route {
|
||||||
|
#[route("/")]
|
||||||
|
Home {},
|
||||||
|
#[route("/blog/:id")]
|
||||||
|
Blog { id: i32 },
|
||||||
|
}
|
||||||
|
|
||||||
|
fn main() {
|
||||||
|
launch(App);
|
||||||
|
}
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
fn App() -> Element {
|
||||||
|
rsx! {
|
||||||
|
Router::<Route> {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
fn Blog(id: ReadOnlySignal<i32>) -> Element {
|
||||||
|
async fn future(n: i32) -> i32 {
|
||||||
|
n
|
||||||
|
}
|
||||||
|
|
||||||
|
// if you use the naive approach, the "Blog post {id}" below will never update when clicking links!
|
||||||
|
// let res = use_resource(move || future(id));
|
||||||
|
|
||||||
|
// the use_reactive hook is required to properly update when clicking links to this component, from this component
|
||||||
|
let res = use_resource(move || future(id()));
|
||||||
|
|
||||||
|
match res() {
|
||||||
|
Some(id) => rsx! {
|
||||||
|
div {
|
||||||
|
"Blog post {id}"
|
||||||
|
}
|
||||||
|
for i in 0..10 {
|
||||||
|
div {
|
||||||
|
Link { to: Route::Blog { id: i }, "Go to Blog {i}" }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
None => rsx! {},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
fn Home() -> Element {
|
||||||
|
rsx! {
|
||||||
|
Link {
|
||||||
|
to: Route::Blog {
|
||||||
|
id: 0
|
||||||
|
},
|
||||||
|
"Go to blog"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue