Clarify why and how nested routing

[gxxcastillo]

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

1. load the site
2. navigate to "/" and confirm that nothing renders
3. navigate to "/Home" and confirm that "Root" renders
4. navigate to "/View" and confirm that "Root" renders

Expected behavior

I would expect for:

• "/" to render the text "Root"
• "/Home" to render the text "Home"
• "/View" to render the text "View"

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Chrome
• Version: 127

Additional context

No response

[ryansolid]

The docs could be clearer on a few points I think:

• When do you need nested routes
• How do you author parent routes (not just configure them)
• Index route matching

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.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• github-aqy729 (Open reproduction)

[gxxcastillo]

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.

[gxxcastillo]

nm, I got my answer:

export const routes = {
  path: '/',
  component: Template,
  children: [
    {
      path: '/',
      component: Root,
    },
    {
      path: '/home',
      component: Home,
    },
    {
      path: '/view',
      component: View,
    },
  ],
};