Evan Almloff 0388a5c1f4 fix formatting vor 1 Jahr
..
benches f976e08f71 Merge branch 'master' into intigrate-collect-assets vor 1 Jahr
examples 0388a5c1f4 fix formatting vor 1 Jahr
src 799be5e4e3 Merge branch 'master' into jk/global-window-fun vor 1 Jahr
tests f976e08f71 Merge branch 'master' into intigrate-collect-assets vor 1 Jahr
.gitignore e83866b986 fix router examples vor 2 Jahren
CHANGELOG.md 56f3002aed feat: add changelogs vor 3 Jahren
Cargo.toml f5bc1a9856 Implement LiveView Router Integration (#1505) vor 1 Jahr
README.md f976e08f71 Merge branch 'master' into intigrate-collect-assets vor 1 Jahr

README.md

Dioxus Router

Crates.io MIT licensed Build Status Discord chat

Website | Guides | API Docs | Chat

Overview

Dioxus Router is a first-party Router for all your Dioxus Apps. It provides an interface similar to React Router, but takes advantage of types for more expressiveness.

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(cx: Scope) -> Element {
    render! {
        Router::<Route> { }
    }
}

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

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

#[component]
fn BlogList(cx: Scope) -> Element {
    render! {
        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(cx: Scope, blog_id: usize) -> Element {
    render! {
        h2 { "Blog Post" }
    }
}

You need to enable the right features for the platform you're targeting since these are not determined automatically!

Contributing

  • Report issues on our issue tracker.
  • Join the discord and ask questions!

License

This project is licensed under the MIT license.

Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in Dioxus by you shall be licensed as MIT without any additional terms or conditions.