Hono•3mo ago

How to resolve relative routes

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>,
      );
    });

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

7 Replies

Huge Letters•3mo ago

hope that helps me get an answer faster... well of course I would solve it after posting this

 .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>,
      );
    })

 .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>,
      );
    })

hope someone would enjoy the meme at least...

Aditya Mathur•3mo ago

Yup, it did attract some attention for sure

Huge Letters•3mo ago

/**
 * 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();
    });
}

/**
 * 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();
    });
}

improved it a bit and turned into a more reusable middleware kinda but i kinda wish this was a built-in it makes sense I would want to declare relative routes which can then be resolved to the absolute ones - my router shouldnt know where and which route it was mounted to - and I should be able to just do resolveRoute("/") and it would give me the absolute route

Joaquim Ley•3mo ago

Please mark this issue as solved ✅ 🙂

Huge Letters•3mo ago

how?( i've tried / but dont see the command

Joaquim Ley•3mo ago

Good question, I thought would have some options available being the OP. 😅

Nico•3mo ago

@Huge Letters you should be able to right click your post and change the flair. Let me know if you can’t. I’ll also see about adding a / command

Gaming

Programming

How to resolve relative routes