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