docs: fix messed up component closing tags router docs
This commit is contained in:
Greg Johnston
parent
a689d1b4c0
commit
274b105676
|
|
@ -4,10 +4,10 @@ We just defined the following set of routes:
|
|||
|
||||
```rust
|
||||
<Routes>
|
||||
<Route path="/" view=Home
|
||||
<Route path="/users" view=Users
|
||||
<Route path="/users/:id" view=UserProfile
|
||||
<Route path="/*any" view=NotFound
|
||||
<Route path="/" view=Home/>
|
||||
<Route path="/users" view=Users/>
|
||||
<Route path="/users/:id" view=UserProfile/>
|
||||
<Route path="/*any" view=NotFound/>
|
||||
</Routes>
|
||||
```
|
||||
|
||||
|
|
@ -17,11 +17,11 @@ Well... you can!
|
|||
|
||||
```rust
|
||||
<Routes>
|
||||
<Route path="/" view=Home
|
||||
<Route path="/users" view=Users
|
||||
<Route path=":id" view=UserProfile
|
||||
<Route path="/" view=Home/>
|
||||
<Route path="/users" view=Users>
|
||||
<Route path=":id" view=UserProfile/>
|
||||
</Route>
|
||||
<Route path="/*any" view=NotFound
|
||||
<Route path="/*any" view=NotFound/>
|
||||
</Routes>
|
||||
```
|
||||
|
||||
|
|
@ -39,8 +39,8 @@ Let’s look back at our practical example.
|
|||
|
||||
```rust
|
||||
<Routes>
|
||||
<Route path="/users" view=Users
|
||||
<Route path="/users/:id" view=UserProfile
|
||||
<Route path="/users" view=Users/>
|
||||
<Route path="/users/:id" view=UserProfile/>
|
||||
</Routes>
|
||||
```
|
||||
|
||||
|
|
@ -53,8 +53,8 @@ Let’s say I use nested routes instead:
|
|||
|
||||
```rust
|
||||
<Routes>
|
||||
<Route path="/users" view=Users
|
||||
<Route path=":id" view=UserProfile
|
||||
<Route path="/users" view=Users>
|
||||
<Route path=":id" view=UserProfile/>
|
||||
</Route>
|
||||
</Routes>
|
||||
```
|
||||
|
|
@ -68,9 +68,9 @@ I actually need to add a fallback route
|
|||
|
||||
```rust
|
||||
<Routes>
|
||||
<Route path="/users" view=Users
|
||||
<Route path=":id" view=UserProfile
|
||||
<Route path="" view=NoUser
|
||||
<Route path="/users" view=Users>
|
||||
<Route path=":id" view=UserProfile/>
|
||||
<Route path="" view=NoUser/>
|
||||
</Route>
|
||||
</Routes>
|
||||
```
|
||||
|
|
@ -94,8 +94,8 @@ You can easily define this with nested routes
|
|||
|
||||
```rust
|
||||
<Routes>
|
||||
<Route path="/contacts" view=ContactList
|
||||
<Route path=":id" view=ContactInfo
|
||||
<Route path="/contacts" view=ContactList>
|
||||
<Route path=":id" view=ContactInfo/>
|
||||
<Route path="" view=|cx| view! { cx,
|
||||
<p>"Select a contact to view more info."</p>
|
||||
}/>
|
||||
|
|
@ -107,11 +107,11 @@ You can go even deeper. Say you want to have tabs for each contact’s address,
|
|||
|
||||
```rust
|
||||
<Routes>
|
||||
<Route path="/contacts" view=ContactList
|
||||
<Route path=":id" view=ContactInfo
|
||||
<Route path="" view=EmailAndPhone
|
||||
<Route path="address" view=Address
|
||||
<Route path="messages" view=Messages
|
||||
<Route path="/contacts" view=ContactList>
|
||||
<Route path=":id" view=ContactInfo>
|
||||
<Route path="" view=EmailAndPhone/>
|
||||
<Route path="address" view=Address/>
|
||||
<Route path="messages" view=Messages/>
|
||||
</Route>
|
||||
<Route path="" view=|cx| view! { cx,
|
||||
<p>"Select a contact to view more info."</p>
|
||||
|
|
@ -203,7 +203,7 @@ fn App(cx: Scope) -> impl IntoView {
|
|||
path="/contacts"
|
||||
view=ContactList
|
||||
// if no id specified, fall back
|
||||
<Route path=":id" view=ContactInfo
|
||||
<Route path=":id" view=ContactInfo>
|
||||
<Route path="" view=|cx| view! { cx,
|
||||
<div class="tab">
|
||||
"(Contact Info)"
|
||||
|
|
|
|||
|
|
@ -38,9 +38,11 @@ struct ContactSearch {
|
|||
> Note: The `Params` derive macro is located at `leptos::Params`, and the `Params` trait is at `leptos_router::Params`. If you avoid using glob imports like `use leptos::*;`, make sure you’re importing the right one for the derive macro.
|
||||
>
|
||||
> If you are not using the `nightly` feature, you will get the error
|
||||
>
|
||||
> ```
|
||||
> no function or associated item named `into_param` found for struct `std::string::String` in the current scope
|
||||
> ```
|
||||
>
|
||||
> At the moment, supporting both `T: FromStr` and `Option<T>` for typed params requires a nightly feature. You can fix this by simply changing the struct to use `q: Option<String>` instead of `q: String`.
|
||||
|
||||
Now we can use them in a component. Imagine a URL that has both params and a query, like `/contacts/:id?q=Search`.
|
||||
|
|
@ -115,8 +117,9 @@ fn App(cx: Scope) -> impl IntoView {
|
|||
<Route
|
||||
path="/contacts"
|
||||
view=ContactList
|
||||
>
|
||||
// if no id specified, fall back
|
||||
<Route path=":id" view=ContactInfo
|
||||
<Route path=":id" view=ContactInfo>
|
||||
<Route path="" view=|cx| view! { cx,
|
||||
<div class="tab">
|
||||
"(Contact Info)"
|
||||
|
|
|
|||
|
|
@ -55,8 +55,9 @@ fn App(cx: Scope) -> impl IntoView {
|
|||
<Route
|
||||
path="/contacts"
|
||||
view=ContactList
|
||||
>
|
||||
// if no id specified, fall back
|
||||
<Route path=":id" view=ContactInfo
|
||||
<Route path=":id" view=ContactInfo>
|
||||
<Route path="" view=|cx| view! { cx,
|
||||
<div class="tab">
|
||||
"(Contact Info)"
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ fn App(cx: Scope) -> impl IntoView {
|
|||
<h1><code>"<Form/>"</code></h1>
|
||||
<main>
|
||||
<Routes>
|
||||
<Route path="" view=FormExample
|
||||
<Route path="" view=FormExample/>
|
||||
</Routes>
|
||||
</main>
|
||||
</Router>
|
||||
|
|
|
|||
Loading…
Reference in New Issue