dioxus/packages/router
Adrian Wannenmacher 75357e974d
rustfmt
2022-12-16 12:10:49 +01:00
..
examples implement scroll restoration 2022-12-15 20:09:53 +01:00
src rustfmt 2022-12-16 12:10:49 +01:00
tests/via_ssr add a few outlet tests 2022-12-13 18:28:36 +01:00
.gitignore chore: move tests out of core and into the top level crate 2022-03-02 22:48:22 -05:00
Cargo.toml add web history integration 2022-12-15 14:46:40 +01:00
CHANGELOG.md feat: add changelogs 2022-01-29 10:17:14 -05:00
Makefile.toml improve Makefile tests 2022-02-04 17:18:31 +01:00
README.md update router readme 2022-12-16 12:03:59 +01:00
webdriver.json fix some newlines 2022-02-03 09:28:06 +01:00

Dioxus Router

Dioxus Router is a first-party Router for all your Dioxus Apps. It provides a React-Router style interface that works anywhere: across the browser, SSR, and natively.

use dioxus::prelude::*;
use dioxus_router::prelude::*;

fn App(cx: Scope) -> Element {
    use_router(
        &cx,
        &|| Default::default(),
        &|| Segment::content(comp(Index)).fixed(
            "blog",
            Route::content(comp(Blog)).nested(
                Segment::content(comp(BlogList))
                    .catch_all((comp(BlogPost), BlogPost))
            )
        )
    );

    render! {
        Outlet { }
    }
}

fn Index(cx: Scope) -> Element {
    render! {
        h1 { "Index" }
        Link {
            target: "/blog",
            "Go to the blog"
        }
    }
}

fn Blog(cx: Scope) -> Element {
    render! {
        h1 { "Blog" }
        Outlet { }
    }
}

fn BlogList(cx: Scope) -> Element {
    render! {
        h2 { "List of blog posts" }
        Link {
            target: "/blog/1",
            "Blog post 1"
        }
        Link {
            target: "/blog/1",
            "Blog post 2"
        }
    }
}

fn BlogPost(cx: Scope) -> Element {
    render! {
        h2 { "Blog Post" }
    }
}