Mirrors/leptos
2
0
Fork 0
mirror of https://github.com/leptos-rs/leptos synced 2024-11-10 06:44:17 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs/examples: use shorthand form for <Route/> views when possible (#1375)

Browse source
This commit is contained in:
Greg Johnston 2023-07-20 16:28:43 -04:00 committed by GitHub
parent 4b8cc96dfa
commit cc52c94348
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 65 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
docs/book/src/router/16_routes.md
View file

@ -87,15 +87,17 @@ The `view` is a function that takes a `Scope` and returns a view.
```rust
<Routes>
<Route path="/" view=|cx| view! { cx, <Home/> }/>
<Route path="/users" view=|cx| view! { cx, <Users/> }/>
<Route path="/users/:id" view=|cx| view! { cx, <UserProfile/> }/>
<Route path="/*any" view=|cx| view! { cx, <NotFound/> }/>
<Route path="/" view=Home/>
<Route path="/users" view=Users/>
<Route path="/users/:id" view=UserProfile/>
<Route path="/*any" view=NotFound/>
</Routes>
```
> The router scores each route to see how good a match it is, so you can define your routes in any order.
> `view` takes a `Fn(Scope) -> impl IntoView`. If a component has no props, it is a function that takes `Scope` and returns `impl IntoView`, so it can be passed directly into the `view`. In this case, `view=Home` is just a shorthand for `|cx| view! { cx, <Home/> }`.
Now if you navigate to `/` or to `/users` you’ll get the home page or the `<Users/>`. If you go to `/users/3` or `/blahblah` you’ll get a user profile or your 404 page (`<NotFound/>`). On every navigation, the router determines which `<Route/>` should be matched, and therefore what content should be displayed where the `<Routes/>` component is defined.
Note that you can define your routes in any order. The router scores each route to see how good a match it is, rather than simply trying to match them top to bottom.
Simple enough?

51
docs/book/src/router/17_nested_routing.md
View file

@ -4,10 +4,10 @@ We just defined the following set of routes:
```rust
<Routes>
<Route path="/" view=|cx| view! { cx, <Home /> }/>
<Route path="/users" view=|cx| view! { cx, <Users /> }/>
<Route path="/users/:id" view=|cx| view! { cx, <UserProfile /> }/>
<Route path="/*any" view=|cx| view! { cx, <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=|cx| view! { cx, <Home /> }/>
<Route path="/users" view=|cx| view! { cx, <Users /> }>
<Route path=":id" view=|cx| view! { cx, <UserProfile /> }/>
<Route path="/" view=Home
<Route path="/users" view=Users
<Route path=":id" view=UserProfile
</Route>
<Route path="/*any" view=|cx| view! { cx, <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=|cx| view! { cx, <Users /> }/>
<Route path="/users/:id" view=|cx| view! { cx, <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=|cx| view! { cx, <Users /> }>
<Route path=":id" view=|cx| view! { cx, <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=|cx| view! { cx, <Users /> }>
<Route path=":id" view=|cx| view! { cx, <UserProfile /> }/>
<Route path="" view=|cx| view! { cx, <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=|cx| view! { cx, <ContactList/> }>
<Route path=":id" view=|cx| view! { cx, <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=|cx| view! { cx, <ContactList/> }>
<Route path=":id" view=|cx| view! { cx, <ContactInfo/> }>
<Route path="" view=|cx| view! { cx, <EmailAndPhone/> }/>
<Route path="address" view=|cx| view! { cx, <Address/> }/>
<Route path="messages" view=|cx| view! { cx, <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>
@ -201,12 +201,9 @@ fn App(cx: Scope) -> impl IntoView {
// /contacts has nested routes
<Route
path="/contacts"
view=|cx| view! { cx, <ContactList/> }
>
view=ContactList
// if no id specified, fall back
<Route path=":id" view=|cx| view! { cx,
<ContactInfo/>
}>
<Route path=":id" view=ContactInfo
<Route path="" view=|cx| view! { cx,
<div class="tab">
"(Contact Info)"

7
docs/book/src/router/18_params_and_queries.md
View file

@ -108,12 +108,9 @@ fn App(cx: Scope) -> impl IntoView {
// /contacts has nested routes
<Route
path="/contacts"
view=|cx| view! { cx, <ContactList/> }
>
view=ContactList
// if no id specified, fall back
<Route path=":id" view=|cx| view! { cx,
<ContactInfo/>
}>
<Route path=":id" view=ContactInfo
<Route path="" view=|cx| view! { cx,
<div class="tab">
"(Contact Info)"

7
docs/book/src/router/19_a.md
View file

@ -52,12 +52,9 @@ fn App(cx: Scope) -> impl IntoView {
// /contacts has nested routes
<Route
path="/contacts"
view=|cx| view! { cx, <ContactList/> }
>
view=ContactList
// if no id specified, fall back
<Route path=":id" view=|cx| view! { cx,
<ContactInfo/>
}>
<Route path=":id" view=ContactInfo
<Route path="" view=|cx| view! { cx,
<div class="tab">
"(Contact Info)"

2
docs/book/src/router/20_form.md
View file

@ -80,7 +80,7 @@ fn App(cx: Scope) -> impl IntoView {
<h1><code>"<Form/>"</code></h1>
<main>
<Routes>
<Route path="" view=|cx| view! { cx, <FormExample/> }/>
<Route path="" view=FormExample
</Routes>
</main>
</Router>

6
docs/book/src/ssr/23_ssr_modes.md
View file

@ -64,7 +64,7 @@ If you’re using server-side rendering, the synchronous mode is almost never wh
5. **Partially-blocked streaming**: “Partially-blocked” streaming is useful when you have multiple separate `<Suspense/>` components on the page. If one of them reads from one or more “blocking resources” (see below), the fallback will not be sent; rather, the server will wait until that `<Suspense/>` has resolved and then replace the fallback with the resolved fragment on the server, which means that it is included in the initial HTML response and appears even if JavaScript is disabled or not supported. Other `<Suspense/>` stream in out of order as usual.
This is useful when you have multiple `<Suspense/>` on the page, and one is more important than the other: think of a blog post and comments, or product information and reviews. It is *not* useful if there’s only one `<Suspense/>`, or if every `<Suspense/>` reads from blocking resources. In those cases it is a slower form of `async` rendering.
This is useful when you have multiple `<Suspense/>` on the page, and one is more important than the other: think of a blog post and comments, or product information and reviews. It is _not_ useful if there’s only one `<Suspense/>`, or if every `<Suspense/>` reads from blocking resources. In those cases it is a slower form of `async` rendering.
- _Pros_: Works if JavaScript is disabled or not supported on the user’s device.
- _Cons_
@ -79,13 +79,13 @@ Because it offers the best blend of performance characteristics, Leptos defaults
```rust
<Routes>
// We’ll load the home page with out-of-order streaming and <Suspense/>
<Route path="" view=|cx| view! { cx, <HomePage/> }/>
<Route path="" view=HomePage
// We'll load the posts with async rendering, so they can set
// the title and metadata *after* loading the data
<Route
path="/post/:id"
view=|cx| view! { cx, <Post/> }
view=Post
ssr=SsrMode::Async
/>
</Routes>

2
examples/errors_axum/src/landing.rs
View file

@ -34,7 +34,7 @@ pub fn App(cx: Scope) -> impl IntoView {
</header>
<main>
<Routes>
<Route path="" view=|cx| view! { cx, <ExampleErrors/> }/>
<Route path="" view=ExampleErrors/>
</Routes>
</main>
</Router>

2
examples/session_auth_axum/src/todo.rs
View file

@ -170,7 +170,7 @@ pub fn TodoApp(cx: Scope) -> impl IntoView {
<hr/>
<main>
<Routes>
<Route path="" view=|cx| view! { cx, <Todos/> }/> //Route
<Route path="" view=Todos/> //Route
<Route path="signup" view=move |cx| view! {
cx,
<Signup action=signup/>

2
examples/todo_app_sqlite_axum/src/todo.rs
View file

@ -104,7 +104,7 @@ pub fn TodoApp(cx: Scope) -> impl IntoView {
</header>
<main>
<Routes>
<Route path="" view=|cx| view! { cx, <Todos/> }/>
<Route path="" view=Todos/>
</Routes>
</main>
</Router>

5
examples/todo_app_sqlite_viz/src/todo.rs
View file

@ -104,10 +104,7 @@ pub fn TodoApp(cx: Scope) -> impl IntoView {
</header>
<main>
<Routes>
<Route path="" view=|cx| view! {
cx,
<Todos/>
}/> //Route
<Route path="" view=Todos/> //Route
</Routes>
</main>
</Router>

36
leptos/tests/test_examples/suspense-tests/src/app.rs
View file

@ -52,12 +52,12 @@ pub fn App(cx: Scope) -> impl IntoView {
<Outlet/>
}
>
<Route path="" view=|cx| view! { cx, <Nested/> }/>
<Route path="inside" view=|cx| view! { cx, <NestedResourceInside/> }/>
<Route path="single" view=|cx| view! { cx, <Single/> }/>
<Route path="parallel" view=|cx| view! { cx, <Parallel/> }/>
<Route path="inside-component" view=|cx| view! { cx, <InsideComponent/> }/>
<Route path="none" view=|cx| view! { cx, <None/> }/>
<Route path="" view=Nested
<Route path="inside" view=NestedResourceInside
<Route path="single" view=Single
<Route path="parallel" view=Parallel
<Route path="inside-component" view=InsideComponent
<Route path="none" view=None
</Route>
// in-order
<Route
@ -69,12 +69,12 @@ pub fn App(cx: Scope) -> impl IntoView {
<Outlet/>
}
>
<Route path="" view=|cx| view! { cx, <Nested/> }/>
<Route path="inside" view=|cx| view! { cx, <NestedResourceInside/> }/>
<Route path="single" view=|cx| view! { cx, <Single/> }/>
<Route path="parallel" view=|cx| view! { cx, <Parallel/> }/>
<Route path="inside-component" view=|cx| view! { cx, <InsideComponent/> }/>
<Route path="none" view=|cx| view! { cx, <None/> }/>
<Route path="" view=Nested
<Route path="inside" view=NestedResourceInside
<Route path="single" view=Single
<Route path="parallel" view=Parallel
<Route path="inside-component" view=InsideComponent
<Route path="none" view=None
</Route>
// async
<Route
@ -86,12 +86,12 @@ pub fn App(cx: Scope) -> impl IntoView {
<Outlet/>
}
>
<Route path="" view=|cx| view! { cx, <Nested/> }/>
<Route path="inside" view=|cx| view! { cx, <NestedResourceInside/> }/>
<Route path="single" view=|cx| view! { cx, <Single/> }/>
<Route path="parallel" view=|cx| view! { cx, <Parallel/> }/>
<Route path="inside-component" view=|cx| view! { cx, <InsideComponent/> }/>
<Route path="none" view=|cx| view! { cx, <None/> }/>
<Route path="" view=Nested
<Route path="inside" view=NestedResourceInside
<Route path="single" view=Single
<Route path="parallel" view=Parallel
<Route path="inside-component" view=InsideComponent
<Route path="none" view=None
</Route>
</Routes>
</main>

8
router/src/lib.rs
View file

@ -56,23 +56,23 @@
//! // our root route: the contact list is always shown
//! <Route
//! path=""
//! view=move |cx| view! { cx, <ContactList/> }
//! view=ContactList
//! >
//! // users like /gbj or /bob
//! <Route
//! path=":id"
//! view=move |cx| view! { cx, <Contact/> }
//! view=Contact
//! />
//! // a fallback if the /:id segment is missing from the URL
//! <Route
//! path=""
//! view=move |_| view! { cx, <p class="contact">"Select a contact."</p> }
//! view=move |_| view! { cx, <p class="contact">"Select a contact."</p> }
//! />
//! </Route>
//! // LR will automatically use this for /about, not the /:id match above
//! <Route
//! path="about"
//! view=move |cx| view! { cx, <About/> }
//! view=About
//! />
//! </Routes>
//! </main>