92 lines
2.0 KiB
Rust
92 lines
2.0 KiB
Rust
use dioxus::prelude::*;
|
|
use dioxus_router::prelude::*;
|
|
|
|
fn main() {
|
|
dioxus_web::launch(App);
|
|
}
|
|
|
|
fn App(cx: Scope) -> Element {
|
|
use_router(
|
|
cx,
|
|
&|| RouterConfiguration::default(),
|
|
&|| {
|
|
Segment::content(comp(Home))
|
|
.fixed("blog", Route::content(comp(Blog)).nested(
|
|
Segment::content(comp(BlogList)).catch_all(
|
|
ParameterRoute::content::<PostId>(comp(BlogPost))
|
|
.name::<BlogPostName>()
|
|
)
|
|
))
|
|
.fixed("myblog", "/blog") // this is new
|
|
.fallback(comp(PageNotFound))
|
|
}
|
|
);
|
|
|
|
render! {
|
|
NavBar {}
|
|
Outlet {}
|
|
}
|
|
}
|
|
|
|
fn NavBar(cx: Scope) -> Element {
|
|
render! {
|
|
nav {
|
|
ul {
|
|
li { Link { target: named::<RootIndex>(), "Home" } }
|
|
li { Link { target: "/blog", "Blog" } }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
fn Home(cx: Scope) -> Element {
|
|
render! {
|
|
h1 { "Welcome to the Dioxus Blog!" }
|
|
}
|
|
}
|
|
|
|
fn Blog(cx: Scope) -> Element {
|
|
render! {
|
|
h1 { "Blog" }
|
|
Outlet {}
|
|
}
|
|
}
|
|
|
|
fn BlogList(cx: Scope) -> Element {
|
|
render! {
|
|
h2 { "Choose a post" }
|
|
ul {
|
|
li { Link {
|
|
target: named::<BlogPostName>().parameter::<PostId>("1"),
|
|
"Read the first blog post"
|
|
} }
|
|
li { Link {
|
|
target: named::<BlogPostName>().parameter::<PostId>("2"),
|
|
"Read the second blog post"
|
|
} }
|
|
}
|
|
}
|
|
}
|
|
|
|
struct PostId;
|
|
struct BlogPostName;
|
|
fn BlogPost(cx: Scope) -> Element {
|
|
let route = use_route(cx).unwrap();
|
|
|
|
let post_id = route.parameter::<PostId>();
|
|
let post = post_id
|
|
.map(|id| id.to_string())
|
|
.unwrap_or(String::from("unknown"));
|
|
|
|
render! {
|
|
h2 { "Blog Post: {post}"}
|
|
}
|
|
}
|
|
|
|
fn PageNotFound(cx: Scope) -> Element {
|
|
render! {
|
|
h1 { "Page not found" }
|
|
p { "We are terribly sorry, but the page you requested doesn't exist." }
|
|
}
|
|
}
|