Example for nested route with config based routing?

[Farnsi]

I misunderstand something, or have a problem in my code, or does this not work with config based routing?

Simple example:

|- `/` shows only a link to `/page`
   |- `/page` has two parts, a header with a link and a content when the link is clicked
      |- shows link to content
      |- shows `/content` if the link is clicked, the link above is still visible

Output when you view /

link to page

Output when you view /page

link to content

Expected output when you click link to content or open route /page/content in the browser url

link to content
Content from `/content`

But Content from is not visible.

app.tsx

// ...
const routes = [
  {
    path: '/', component: Root,
  },
  {
    path: '/page',
    component: Page,
    children: [
      { path: '/', component: Page },
      { path: '/content', component: Content },
    ],
  },
]

const Routes = useRoutes(routes)
// ...
    <Router>
      <Routes></Routes>
    </Router>

page.tsx

const Routes = useRoutes(routes[1])
//                       ^^^^^^^^^ this not really works
// ...
    </>
      <A href="content">link to content</A>
      <Routes></Routes>
// or
//    <Router>
//      <Routes></Routes>
//    </Router>
    </>
  )

I can view page /
I can view /page
I see link to content
When i click link to content the url changes to /page/content
I see still link to content
But no content is visible

What i am doing wrong?

[Farnsi]

I tried it the tsx-way and it is ok.

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>
    </>

[Farnsi]

Examples:

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

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

[onx2]

I'm also experiencing an issue with the config router using children property. I'm using an absolute path for the base in Vite so my prod build works but I've also tried relative with no luck. In my case, the nested route in the children property gets rendered as the root of the nested routes and the root ends up rendering my 404 page because it isn't found.

I would love for that to work but as a workaround you can define the children as top level with the full path name:

// Working for me
{
    path: "/:entity",
    component: lazy(() => import("./pages/Profile")),
  },
  {
    path: "/:entity/reports",
    component: lazy(() => import("./pages/Profile/UserReports")),
  },
  {
    path: "/:entity/projects",
    component: lazy(() => import("./pages/Profile/UserProjects")),
  },

// Broken
{
  path: "/:entity",
  component: lazy(() => import("./pages/Profile")),
  children: [
    {
      path: "/reports",
      component: lazy(() => import("./pages/Profile/UserReports")),
    },
    {
      path: "/projects",
      component: lazy(() => import("./pages/Profile/UserProjects")),
    },
  ]
}