Dioxus框架中的混合路由

路由

你可以使用Dioxus Router轻松地将全栈应用与客户端路由器集成。这允许你在应用中创建不同的场景并在它们之间导航。你可以在路由器参考文档中了解更多关于路由器的信息。

#![allow(non_snake_case)]

use axum::Router;
use dioxus::prelude::*;

use dioxus_router::prelude::*;
use serde::{Deserialize, Serialize};

fn main() {
    launch(|| rsx! { Router::<Route> {} });
}

#[derive(Clone, Routable, Debug, PartialEq, Serialize, Deserialize)]
enum Route {
    #[route("/")]
    Home {},
    #[route("/blog/:id")]
    Blog { id: i32 },
}

#[component]
fn Blog(id: i32) -> Element {
    rsx! {
        Link { to: Route::Home {}, "转到计数器" }
        table {
            tbody {
                for _ in 0..id {
                    tr {
                        for _ in 0..id {
                            td { "hello world!" }
                        }
                    }
                }
            }
        }
    }
}

#[component]
fn Home() -> Element {
    let mut count = use_signal(|| 0);
    let mut text = use_signal(|| "...".to_string());

    rsx! {
        Link { to: Route::Blog { id: count() }, "转到博客" }
        div {
            h1 { "High-Five计数器: {count}" }
            button { onclick: move |_| count += 1, "举高手！" }
            button { onclick: move |_| count -= 1, "放下手！" }
            button {
                onclick: move |_| {
                    async move {
                        if let Ok(data) = get_server_data().await {
                            println!("客户端收到: {}", data);
                            text.set(data.clone());
                            post_server_data(data).await.unwrap();
                        }
                    }
                },
                "运行服务器函数！"
            }
            "服务器说: {text}"
        }
    }
}

#[server(PostServerData)]
async fn post_server_data(data: String) -> Result<(), ServerFnError> {
    println!("服务器收到: {}", data);

    Ok(())
}

#[server(GetServerData)]
async fn get_server_data() -> Result<String, ServerFnError> {
    Ok("来自服务器的问候！".to_string())
}