Comments (4)
The fundamental issue here is that children
doesn't flatten the children you pass it. Route
expects to get n
children, each of which is a Route
. In your enumerated view, you pass it 2 children, each of which is a Route
. In your collected and fragment views, you pass it 1 child, which is a Vec or Fragment. These are not flattened.
This just has to do with the way the view
macro constructs children. Here's a working version of the collected approach that I created by expanding the macro for the working enumerated version:
#[component(transparent)]
fn CollectedNestedRoutes() -> impl IntoView {
let nested = Route(
RouteProps::builder()
.path("/")
.view(SimpleNavComponent)
// this is very similar to the way the view macro constructs children,
// but allows you to construct the vec however you'd like rather than just adding each child
.children(ToChildren::to_children(|| {
Fragment::lazy(|| {
vec![1, 2]
.into_iter()
.map(|n: i8| view! { <DeepNestedRouteSelector url=n /> })
.collect()
})
}))
.build(),
);
view! {
<Route path="/" view=|| view! {<Html lang="en-US" /><Outlet />}>
{nested}
<Route path="/comp3" view=SimpleComponent3 />
<Route path="/comp4" view=SimpleComponent4 />
</Route>
}
}
In case it's helpful in reducing boilerplate, by the way, any component with no props is just a function with no arguments -- so you can replace every instance of something like view=|| view! { <SimpleNavComponent/> }
with just view=SimpleNavComponent
.
from leptos.
I'm not entirely sure what your example is supposed to show or how it relates to the problem in the application.
In particular, it seems like your discussion of .render_to_string()
is an XY problem; .render_to_string()
shouldn't be displaying anything in the case of these transparent Route components, which are intended just to build a RouteDefinition
. It seems like maybe you're trying to use render_to_string()
for debugging purposes here (right?) and it's not working as expected, but that that's not the actual issue.
With very complex or dynamic routing setups like the one you're trying to create, I would suggest ditching the <Route/>
component etc. and just building a nested RouteDefinition
struct manually. This is what <Route/>
returns in any case, and the reason things are marked #[component(transparent)]
is to allow them just to return that RouteDefinition
.
Alternately, if you provide a minimal reproduction (not your entire application) that illustrates the issue and try to explain more of the expected vs actual behavior I can try to help figure it out.
from leptos.
Yes, as you correctly noticed, I was using render_to_string()
in order to debug the components inside routes.
But apparently, my issue appears when trying to consolidate components into views and nesting them.
Differently from what I thought, the problem doesn't come from having components between nested Route
s (once they are marked as #component(transparent)
), but from both trying to collect_into_view
them, and from converting them into a Fragment
(and then proceeding to map it to view).
Since both approaches mentioned above yield the infamous component with id #-#-#-# not found, ignoring it for hydration
error, and as mentioned at Hydration Errors chapter from Leptos book, I felt free to inquire further on this matter.
Please feel free take a look on this minimal reproduction repository, as I believe it illustrates the issue better. So, as you can infer, the expected behavior is to have all 4 components routes listed and accessible in the application when iterating (or casting into Fragment
) the DeepNestedRouteSelector
component.
I've seen your suggestion of implementing the RouteDefinition manually, but for me, it didn't look so simple to do, specially when it comes on having a concise id
for ensuring correct hydration. I've also noticed that you're considering changing visibility on new_route_id
function (which could help in my case, I assume), so I'd like to request, if possible -- could you please provide me with an example of implementing RouteDefinition
manually?
Finally, thanks for your effort on developing Leptos, it's a great framework, indeed.
from leptos.
Greg, it really did the trick, thanks a lot.
from leptos.
Related Issues (20)
- [0.7] Large HTML trees can cause stack overflows in debug mode with no useful error message HOT 4
- [0.7] LocalResources loaded in islands do not trigger Suspense in non-island parents HOT 2
- `Signal<T, S = SyncStorage>` doesn't implement `Track` HOT 5
- [0.7-beta5] Islands hydration issue (unique ID problem) HOT 3
- Double navigation cause desync beetween `Location::pathname` and the actual URL HOT 1
- [0.7] initial state of signal not read for dynamic classes HOT 2
- [0.7] Resource lacks `Debug`
- Compilation failed due to server_fn, no method found HOT 2
- Issues with runtime crashes when using ProtectedParentRoute HOT 5
- [0.7] panick when loading a blocking resource
- Nested routes in separate component don't compile when already inside ParentRoute. HOT 1
- Changes added in commit #5af7b54c seems to be causing issues with rendering svg icons
- Upgrade Lepros rkyv integration to support rkyv 8 HOT 1
- template macro page shows view macro page content HOT 1
- [0.7] runtime error: stored children already disposed HOT 1
- `expect_context` in server fn backing a resource panics when the resource is in a context HOT 2
- [0.7] `expect_context` not seeing the context within a router and a `<Show fallback>`
- leptos_macro: consider remove proc-macro-error as unmaintained HOT 2
- SVG elements don't show under certain conditions. HOT 1
- Context is lost across a `Suspend` boundary. HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from leptos.