update the router guide

This commit is contained in:
Evan Almloff committed 2023-06-01 13:13:59 -05:00
1 parent 67992f7da9
commit 0d3ea377ce
63 files changed
+615 -1705

No files matched your search

+9 -4
View File
@@ -22,6 +22,7 @@ We might want to map this structure to these paths and components:
Nested routes allow us to do this.
## Route Depth
With nesting routes, the router manages content on multiple levels. In our
example, when the path is `/settings`, there are two levels of content:
@@ -34,13 +35,14 @@ content of nested routes to actually be rendered, we also need nested
[`Outlet`]s.
## Defining the content components
We start by creating the components we want the router to render.
Take a look at the `Settings` component. When it gets rendered by an [`Outlet`],
it will render a second [`Outlet`]. Thus the second [`Outlet`] is nested within
the first one, and will in turn render our nested content.
```rust,no_run
```rust, no_run
# // Hidden lines (like this one) make the documentation tests work.
# extern crate dioxus;
# use dioxus::prelude::*;
@@ -74,13 +76,14 @@ fn PrivacySettings(cx: Scope) -> Element {
```
## Defining the root [`Segment`]
Now we create the [`Segment`] that we will pass to the router.
Note that we wrap `comp(Settings)` within a [`Route`]. For this exact code that
is unnecessary, as this would be done automatically. However, in the next step
we'll use a method of [`Route`], so we might as well add this now.
```rust,no_run
```rust, no_run
# // Hidden lines (like this one) make the documentation tests work.
# extern crate dioxus;
# use dioxus::prelude::*;
@@ -103,6 +106,7 @@ fn App(cx: Scope) -> Element {
```
## Defining the nested [`Segment`]
In order to create nested routes we need to create a nested [`Segment`]. We then
pass it to the [`Route`] on the root segment.
@@ -110,7 +114,7 @@ pass it to the [`Route`] on the root segment.
>
> https://router.example/`root_segment`/`first_nested_segment`/`second_nested_segment`/...
```rust,no_run
```rust, no_run
# // Hidden lines (like this one) make the documentation tests work.
# extern crate dioxus;
# use dioxus::prelude::*;
@@ -143,7 +147,8 @@ fn App(cx: Scope) -> Element {
```
## Full Code
```rust
```rust, no_run
# // Hidden lines (like this one) make the documentation tests work.
# extern crate dioxus;
# use dioxus::prelude::*;