Dioxus Router

网站 | 指南 | API 文档 | 聊天

概述

Dioxus Router 是所有 Dioxus 应用的官方路由器。它提供了一个类似于 React Router 的接口，但利用类型提供了更多的表达性。

use dioxus::prelude::*;
use dioxus_router::prelude::*;
use std::str::FromStr;

#[rustfmt::skip]
#[derive(Clone, Debug, PartialEq, Routable)]
enum Route {
    #[nest("/blog")]
        #[layout(Blog)]
            #[route("/")]
            BlogList {},

            #[route("/:blog_id")]
            BlogPost { blog_id: usize },
        #[end_layout]
    #[end_nest]
    #[route("/")]
    Index {},
}

#[component]
fn App() -> Element {
    rsx! {
        Router::<Route> { }
    }
}

#[component]
fn Index() -> Element {
    rsx! {
        h1 { "Index" }
        Link {
            to: Route::BlogList {},
            "Go to the blog"
        }
    }
}

#[component]
fn Blog() -> Element {
    rsx! {
        h1 { "Blog" }
        Outlet::<Route> { }
    }
}

#[component]
fn BlogList() -> Element {
    rsx! {
        h2 { "List of blog posts" }
        Link {
            to: Route::BlogPost { blog_id: 0 },
            "Blog post 1"
        }
        Link {
            to: Route::BlogPost { blog_id: 1 },
            "Blog post 2"
        }
    }
}

#[component]
fn BlogPost(blog_id: usize) -> Element {
    rsx! {
        h2 { "Blog Post" }
    }
}

由于这些不是自动确定的，因此您需要为目标平台启用正确的功能！

贡献

• 在我们的 问题跟踪器 上报告问题。
• 加入 Discord 并提问！

许可协议

本项目采用 MIT 许可协议。

除非您明确声明，否则您提交给 Dioxus 的任何贡献均应按 MIT 许可，不附加任何其他条款或条件。