Skip to content
This repository was archived by the owner on Jul 19, 2020. It is now read-only.

Commit d156979

Browse files
jstarrygitbook-bot
authored andcommitted
GitBook: [master] 2 pages modified
1 parent 6a62cca commit d156979

File tree

2 files changed

+5
-22
lines changed

2 files changed

+5
-22
lines changed

‎src/concepts/router.md‎

Lines changed: 3 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
---
2-
description: 'Yew''s official router - https://crates.io/yew-router'
2+
description: Yew-Router crate
33
---
44

55
# Router
66

7-
Routers in Single Page Applications \(SPA\) handle displaying different pages depending on what the URL is. Instead of the default behavior of requesting a different remote resource when a link is clicked, the router instead sets the URL locally to point to a valid route in your application. The router then detects this change and then decides what to render.
8-
9-
## Core Elements
10-
117
### Route
128

139
Contains a String representing everything after the domain in the url and optionally the state stored in the history api.
@@ -26,20 +22,6 @@ The `Switch` trait is used to convert a `Route` to and from the implementer of t
2622

2723
### Router
2824

29-
The Router component communicates with `RouteAgent` and will automatically resolve Routes it gets from the agent into switches, which it will expose via a `render` prop that allows specifying how the resulting switch gets converted to `Html`.
30-
31-
## How to use the Router
32-
33-
First, you want to create a type that represents all the states of your application. Do note that while this typically is an enum, structs are supported as well, and that you can nest other items that implement `Switch` inside.
34-
35-
Then you should derive `Switch` for your type. For enums, every variant must be annotated with `#[to = "/some/route"]`, or if you use a struct instead, that must appear outside the struct declaration.
36-
37-
Do note that the implementation generated by the derive macro for `Switch` will try to create each variant in order from first to last, so if any route could possibly match two of your specified `to` annotations, then the first one will match, and the second will never be tried.
38-
39-
You can also capture sections using variations of `{}` within your `#[to = ""]` annotation. `{}` means capture text until the next separator \(either "/", "?", "&", or "\#" depending on the context\). `{*}` means capture text until the following characters match, or if no characters are present, it will match anything. `{<number>}` means capture text until the specified number of separators are encountered \(example: `{2}` will capture until two separators are encountered\).
40-
41-
For structs and enums with named fields, you must specify the field's name within the capture group like so: `{user_name}` or `{*:age}`.
42-
43-
The Switch trait works with capture groups that are more structured than just Strings. You can specify any type that implements `Switch`. So you can specify that the capture group is a `usize`, and if the captured section of the URL can't be converted to it, then the variant won't match.
44-
25+
The Router component communicates with `RouteAgent` and will automatically resolve Routes it gets from the agent into switches, which it will expose via a `render` prop that allows specifying how the resulting switch gets converted to `Html<_>`.
4526

27+
How to use the router.

‎src/getting-started/build-a-sample-app.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ fn main() {
7171
```
7272
{% endcode %}
7373

74-
This template sets up your root `Component`, called `App` which shows a button that updates itself when you click it. Take special note of `yew::start_app::<Model>()` inside `main()` which starts your app and mounts it to the page's `<body>` tag.
74+
This template sets up your root `Component`, called `App` which shows a button that updates itself when you click it. Take special note of `yew::start_app::<Model>()` inside `main()` which starts your app and mounts it to the page's `<body>` tag. If you would like to start your application with any dynamic properties, you can instead use `yew::start_app_with_props(..)`.
7575

7676
### Run your App!
7777

@@ -82,3 +82,4 @@ cargo web start
8282
```
8383

8484
`cargo-web` will automatically add the `wasm32-unknown-unknown` target for you, build your app, and finally make it available at [http://\[::1\]:8000](http://[::1]:8000) by default. Consult `cargo web start --help` for other options.
85+

0 commit comments

Comments
 (0)