How to resolve relative routes

[HugeLetters]

I have a sub-router like this

.get(
      '/',
      basicAuth({
        username: 'user',
        password: 'lol',
      }),
      async (c) => {
        return c.render(<Dashboard  />);
      },
    )
.get('*', (c) => {
      return c.render(
        <div>
          not found. <a href={url}>go to homepage</a>
        </div>,
      );
    });

How can I construct a URL to pass it to the anchor in the catch-all route so that it would point to the index route above?
This router exists as a subrouter so it has no idea what route it has been assigned to.

The only solution I could come up with would involve doing a route :total-unique-param/* and then looking at the matched route and the request path and resolving them to a relative url.

[HugeLetters]

The problem would be extremely easy to solve if I could either

• access * as another param like Remix allows you to
• define a rest parameter like [...param] in Nextjs

cause I then I could just scrub off the url tail with parameter value

[HugeLetters]

Yeah ok, I think I've figured it out

 .get(':p{.*}', (c) => {
      const url = c.req.path.replace(c.req.param('p') ?? '', '');
      return c.render(
        <div>
          not found. <a href={url}>go to homepage</a>
        </div>,
      );
    })

[HugeLetters]

Improved this further

/**
 * Wrap your router with this function and a `basePath` var will be exposed to all of your routes.
 * Base path is whatever the full path this router has been assigned to.
 *
 * @example
 * new Hono().route(
 *   '/a',
 *   new Hono().route(
 *      '/b',
 *      withBasePath(new Hono()).get('/c', (c) => c.var.basePath // "/a/b"
 * )));
 */
export function withBasePath<THono extends Hono>(app: THono) {
  return app
    .use(
      ':*{.*}',
      createMiddleware<{
        Variables: {
          /** This will be undefined on index routes because they do not trigger this middleware */
          basePath?: string;
        };
      }>((c, next) => {
        const rest = c.req.param('*');
        const path = c.req.path;

        const basePath = rest ? path.replace(new RegExp(`${rest}$`), '') : path;

        c.set('basePath', basePath);
        return next();
      }),
    )
    .use<{ Variables: { basePath: string } }>((c, next) => {
      c.set('basePath', c.var.basePath ?? c.req.path);
      return next();
    });
}