Open gxxcastillo opened 1 month ago
The docs could be clearer on a few points I think:
First what you described doesn't sound like nested routes. It sounds like you want parallel routes. To get the expected behavior you have described you could do this:
export const routes = [{
path: '/',
component: Root,
}, {
path: '/home',
component: Home,
},
{
path: '/view',
component: View,
}];
In this case when it matches to any of these paths it will show the related component.
Nested routes are when you want one route inside the other. In order to do that you need to indicate where it will be inserted. This is done with props.children
.
So inside your root component you could:
function Root(props) {
return <div>Root {props.children}</div>;
}
This will insert the nested route inside this div next to the text Root.
The other thing that is a bit special here is we only match on routes that exist.. We don't render a route without children. So nested routes need to have a pathless or /
route inside the children if you want just plain /
to work. You can go directly to /home
as that would match but we need to have the default route if we want just /
to work.. I renamed /home
in this case but it could just be a different Component.
Here is the updated example.
https://stackblitz.com/edit/github-aqy729-qdxvdk?file=src%2Fapp.tsx
In any case this isn't a bug so much as a documentation shortcoming.. so moving to docs.
Start a new pull request in StackBlitz Codeflow.
Ah! Of course 🤦. Thanks for the thorough clarification. How do I render an index route with the nesting approach?
For example, if I were to want everything under /
to use the same template, including /
itself.
nm, I got my answer:
export const routes = {
path: '/',
component: Template,
children: [
{
path: '/',
component: Root,
},
{
path: '/home',
component: Home,
},
{
path: '/view',
component: View,
},
],
};
Describe the bug
I'm not able to render my UI when I set up a route config with nested routes using solid-start.
Following documentation from here
Your Example Website or App
https://stackblitz.com/edit/github-aqy729
Steps to Reproduce the Bug or Issue
Expected behavior
I would expect for:
Screenshots or Videos
No response
Platform
Additional context
No response