Config based routing not work with nested routes

[Farnsi]

Describe the bug

Full explanation: #254

This works:

page.tsx

// ...
    <Router>
      <Routes>
        <Route path="/" component={Root} />
        <Route path="/page/*" component={Page}></Route>
      </Routes>
    </Router>

page.tsx

// ...
    </>
      <A href="content">link to content</A>
      <Routes>
        <Route path="/content" component={Content} />
      </Routes>
    </>

Transform that code to config based routing and click the link to content change the url, but did not show the component Content.

Your Example Website or App

JSX-bases (ok): https://playcode.io/1335544

Config based (not work): https://playcode.io/1335586

Steps to Reproduce the Bug or Issue

View example.

Expected behavior

Same as tsx-based routing.

Screenshots or Videos

No response

Platform

• @solidjs/router: 0.8.1
• Linux Mint 21
• Chrome Version 111.0.5563.110 (Offizieller Build) (64-Bit)

Additional context

No response

[epicbytes]

I was also surprised it didn't work.
But if you do this, then everything starts working.

const defaultRoutes = [
  {
    path: "/",
    component: Pages["DashboardPage"],
  },
  {
    path: "/services",
    component: Pages["ServicesPage"],
  },
  {
    path: "/services/:id",
    component: Pages["ServiceWrapper"],
    children: [
      {
        path: "/",
        component: Pages["ServicePage"],
      },
      {
        path: "/models",
        component: Pages["ModelsPage"],
      },
      {
        path: "/methods",
        component: Pages["MethodsPage"],
      },
    ],
  },
  {
    path: "/workers",
    component: Pages["WorkersPage"],
  },
  {
    path: "/workers/:id",
    component: Pages["WorkerWrapper"],
    children: [
      {
        path: "/",
        component: Pages["WorkerPage"],
      },
    ],
  }
]

[ryansolid]

As far as I can tell this is because the examples aren't equivalent. In your config based one, the first router gets only the root route, and your nested one gets the rest, but you put a Page component in a Page component which doesn't have an Outlet and it just doesn't work. When I separate the routes so they are equivalent to the JSX it just works:

import Content from './content';
import Page from './page';
import Root from './root';

export const routes1 = [
  {
    path: '/',
    component: Root,
  },
  {
    path: '/page/*',
    component: Page,
  },
];

export const routes2 = {
  path: '/content',
  component: Content,
};

Given this router and nested ` no longer exists I'm going to close this anyway, but I think the original issue wasn't one.