Problem with nested routes using useBase

[ramsesgarate]

Environment

Node: 22.10.0
h3: 1.13.0
Windows 11

Reproduction

https://stackblitz.com/edit/github-ihqa9f?file=app.ts

Describe the bug

When attempting to set up nested routes using useBase in h3, the route notesRouter.get('/') does not respond as expected, while other routes, such as notesRouter.get('/get'), work correctly.

Steps to Reproduce:

• Create an application with h3.
• Define a main route using createRouter and a nested route with useBase for notesRouter.
• In notesRouter, define two routes: '/get' and '/'.
• Make a request to '/api/notes/' and observe the behavior.

The route notesRouter.get('/') should respond as expected, similar to notesRouter.get('/get'), allowing for a complete RESTful API structure.

Additional context

import { createApp, createRouter, useBase } from 'h3';

// Init App
export const app = createApp({ debug: true });

// Main Router
const router = createRouter();
router.use(
  '/',
  (event) => `
    <h1>Nested routes</h1>
    <ul>
      <li>Works: <a href="/api/notes/get">/api/notes/get</a></li>
      <li>Not working: <a href="/api/notes/">/api/notes/</a></li>
    </ul>
  `
);
app.use(router);

const notesRouter = createRouter();
router.use('/api/notes/**', useBase('/api/notes', notesRouter.handler));
notesRouter.get('/get', () => '<h1>Nested routes works /api/notes/get</h1><a href="/">Home</a>');
notesRouter.get('/', () => '<h1>Nested routes not working /api/notes/</h1><a href="/">Home</a>');

Logs

No response

[iiio2]

@ramsesgarate , I think you have used createRouter twice here. You may try to follow this pattern (https://h3.unjs.io/guide/router#nested-routers).

[snrmwg]

I can observe the same faulty behaviour. The pattern described at https://h3.unjs.io/guide/router#nested-routers also used two createRouter. The "/" route of the child router can only be called at the moment when you add a second "/" to the requested URL (like "/api/notes//" in the demo above).

[space-otter]

In my opinion, it's not a misbehavior. Based on the route matching logic, here's how it should work:

For example:

router.use('/api/**', useBase('/api/notes', notesRouter.handler));

If instead you intended to match '/api', you would set it up like this:

router.use('/**', useBase('/api', notesRouter.handler));

[space-otter]

Nvm, https://h3.unjs.io/examples/from-expressjs-to-h3 provides following example:

/**
 * h3 example app.
 */
import { createApp, createRouter, defineEventHandler, useBase } from "h3";

export const app = createApp();

const apiv1 = createRouter()
  .get(
    "/",
    defineEventHandler(() => {
      return "Hello from APIv1 root route.";
    }),
  )
  .get(
    "/users",
    defineEventHandler(() => {
      return "List of APIv1 users.";
    }),
  );

const apiv2 = createRouter()
  .get(
    "/",
    defineEventHandler(() => {
      return "Hello from APIv2 root route.";
    }),
  )
  .get(
    "/users",
    defineEventHandler(() => {
      return "List of APIv2 users.";
    }),
  );

app.use("/api/v1/**", useBase("/api/v1", apiv1.handler));
app.use("/api/v2/**", useBase("/api/v2", apiv2.handler));

So the expected behavior would be, that you can reach /api/v1 and /api/v2