fix book example section
This commit is contained in:
5 files changed
+147
-155
No files matched your search
@@ -7,12 +7,12 @@ We told them where to go using the `target` property. This property takes a
|
||||
A [`NavigationTarget`] is similar to the `href` of an HTML anchor element.It
|
||||
tells the router where to navigate to. The Dioxus Router knows three kinds of
|
||||
navigation targets:
|
||||
- [`InternalTarget`]: we already saw that. It's basically an `href`, but cannot
|
||||
- [`Internal`]: we already saw that. It's basically an `href`, but cannot
|
||||
link to content outside our app.
|
||||
- [`ExternalTarget`]: This works exactly like an HTML anchors `href`. In fact,
|
||||
- [`External`]: This works exactly like an HTML anchors `href`. In fact,
|
||||
it is just passed through. Don't use this for in-app navigation as it'll
|
||||
trigger a page reload by the browser.
|
||||
- [`NamedTarget`]: this is the most interesting form of navigation target. We'll look
|
||||
- [`Named`]: this is the most interesting form of navigation target. We'll look
|
||||
at it in detail in this chapter.
|
||||
|
||||
## External navigation
|
||||
@@ -27,7 +27,7 @@ If we need a link to an external page we can do it like this:
|
||||
fn GoToDioxus(cx: Scope) -> Element {
|
||||
cx.render(rsx! {
|
||||
Link {
|
||||
target: ExternalTarget(String::from("https://dioxuslabs.com")),
|
||||
target: NavigationTarget::External("https://dioxuslabs.com".into()),
|
||||
"Explicit ExternalTarget target"
|
||||
}
|
||||
Link {
|
||||
@@ -38,8 +38,8 @@ fn GoToDioxus(cx: Scope) -> Element {
|
||||
}
|
||||
```
|
||||
|
||||
> Note that we can use a `str`, just like with [`InternalTarget`]s. The router
|
||||
> will convert a `str` to an [`ExternalTarget`] if the URL is absolute.
|
||||
> Note that we can use a `str`, just like with [`Internal`]s. The router will
|
||||
> convert a `str` to an [`External`] if the URL is absolute.
|
||||
|
||||
## Named navigation
|
||||
When defining our routes, we can optionally give them unique static names. This
|
||||
@@ -50,9 +50,10 @@ named navigation we instead give it a name, and let it figure out the path.
|
||||
|
||||
This has several advantages:
|
||||
- We don't have to remember absolute paths or care about what the current path
|
||||
is
|
||||
- changing paths later on won't break internal links
|
||||
- paths can easily be localized without affecting app logic
|
||||
is.
|
||||
- Changing paths later on won't break internal links.
|
||||
- Paths can easily be localized without affecting app logic.
|
||||
- The compiler makes sure we don't have typos.
|
||||
|
||||
Let's try that now! First, we give our blog post route a name. We can reuse our
|
||||
`BlogPost` component as a name.
|
||||
@@ -64,23 +65,28 @@ Let's try that now! First, we give our blog post route a name. We can reuse our
|
||||
# use dioxus_router::prelude::*;
|
||||
# fn Blog(cx: Scope) -> Element { unimplemented!() }
|
||||
# fn BlogList(cx: Scope) -> Element { unimplemented!() }
|
||||
# struct PostId;
|
||||
# fn BlogPost(cx: Scope) -> Element { unimplemented!() }
|
||||
# fn Home(cx: Scope) -> Element { unimplemented!() }
|
||||
# fn PageNotFound(cx: Scope) -> Element { unimplemented!() }
|
||||
#
|
||||
struct BlogPostName;
|
||||
|
||||
fn App(cx: Scope) -> Element {
|
||||
let routes = use_segment(&cx, || {
|
||||
Segment::default()
|
||||
.index(Home as Component)
|
||||
.fixed(
|
||||
"blog",
|
||||
Route::new(Blog as Component).nested(
|
||||
Segment::default().index(BlogList as Component).catch_all(
|
||||
// notice the name at the end of the line
|
||||
ParameterRoute::new("post_id", BlogPost as Component).name(BlogPost),
|
||||
),
|
||||
),
|
||||
)
|
||||
});
|
||||
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>() // this is new
|
||||
)
|
||||
))
|
||||
.fallback(comp(PageNotFound))
|
||||
}
|
||||
);
|
||||
|
||||
// ...
|
||||
# unimplemented!()
|
||||
@@ -94,6 +100,8 @@ Now we can change the targets of the links in our `BlogList` component.
|
||||
# use dioxus::prelude::*;
|
||||
# extern crate dioxus_router;
|
||||
# use dioxus_router::prelude::*;
|
||||
# struct PostId;
|
||||
# struct BlogPostName;
|
||||
# fn BlogPost(cx: Scope) -> Element { unimplemented!() }
|
||||
#
|
||||
fn BlogList(cx: Scope) -> Element {
|
||||
@@ -101,11 +109,13 @@ fn BlogList(cx: Scope) -> Element {
|
||||
h2 { "Choose a post" }
|
||||
ul {
|
||||
li { Link {
|
||||
target: (BlogPost, [("post_id", String::from("1"))]),
|
||||
target: named::<BlogPostName>().parameter::<PostId>("1"),
|
||||
"Read the first blog post"
|
||||
} }
|
||||
li { Link {
|
||||
target: (BlogPost, [("post_id", String::from("2"))], "query"),
|
||||
target: named::<BlogPostName>()
|
||||
.parameter::<PostId>("1")
|
||||
.query("query"),
|
||||
"Read the second blog post"
|
||||
} }
|
||||
}
|
||||
@@ -113,7 +123,7 @@ fn BlogList(cx: Scope) -> Element {
|
||||
}
|
||||
```
|
||||
|
||||
As you can see, a [`NamedTarget`] requires three fields:
|
||||
As you can see, a [`Named`] requires three fields:
|
||||
1. the name to navigate to
|
||||
2. a `Vec` containing all parameters that need to be inserted into the path
|
||||
3. optionally a query string to use.
|
||||
@@ -135,7 +145,7 @@ fn NavBar(cx: Scope) -> Element {
|
||||
cx.render(rsx! {
|
||||
nav {
|
||||
ul {
|
||||
li { Link { target: (RootIndex, []), "Home" } }
|
||||
li { Link { target: named::<RootIndex>(), "Home" } }
|
||||
li { Link { target: "/blog", "Blog" } }
|
||||
}
|
||||
}
|
||||
@@ -144,8 +154,8 @@ fn NavBar(cx: Scope) -> Element {
|
||||
```
|
||||
|
||||
|
||||
[`ExternalTarget`]: https://docs.rs/dioxus-router/latest/dioxus_router/navigation/enum.NavigationTarget.html#variant.ExternalTarget
|
||||
[`InternalTarget`]: https://docs.rs/dioxus-router/latest/dioxus_router/navigation/enum.NavigationTarget.html#variant.InternalTarget
|
||||
[`NamedTarget`]: https://docs.rs/dioxus-router/latest/dioxus_router/navigation/enum.NavigationTarget.html#variant.NamedTarget
|
||||
[`NavigationTarget`]: https://docs.rs/dioxus-router/latest/dioxus_router/navigation/enum.NavigationTarget.html
|
||||
[`RootIndex`]: https://docs.rs/dioxus-router/latest/dioxus_router/names/struct.RootIndex.html
|
||||
[`External`]: https://docs.rs/dioxus-router-core/latest/dioxus_router_core/navigation/enum.NavigationTarget.html#variant.External
|
||||
[`Internal`]: https://docs.rs/dioxus-router-core/latest/dioxus_router_core/navigation/enum.NavigationTarget.html#variant.Internal
|
||||
[`Named`]: https://docs.rs/dioxus-router-core/latest/dioxus_router_core/navigation/enum.NavigationTarget.html#variant.Named
|
||||
[`NavigationTarget`]: https://docs.rs/dioxus-router-core/latest/dioxus_router_core/navigation/enum.NavigationTarget.html
|
||||
[`RootIndex`]: https://docs.rs/dioxus-router-core/latest/dioxus_router_core/prelude/struct.RootIndex.html
|
||||
Reference in new issue
Block a user