having issues getting app.get('/@:username') working

[redimongo]

i am trying to get paths like /@russell to work in my hono app. I have tried everything I can think of.

app.get('/%40:id', (c) => {
  const { id } = c.req.param();
  return new Response(id);
});

and tried

app.get('/@:id', (c) => {
  const { id } = c.req.param();
  return new Response(id);
});

i come from expressJS background and in there we can do it by using

app.use('/@:username', (req, res, next) => {
  const username = req.params.username;
  // You can add any middleware logic here
  console.log(`Received request for user: ${username}`);
  next();
});

which then allows us to use it in a GET app.get('/@:username')
I am wondering if anyone can help

[redimongo]

I have a solution, but it's not the way it should be

// Handle /@:username/* route
app.get('/@:username/*', (c: Context) => {
  console.log("Handling request for username");

  // Extract username from URL path
  const segments = c.req.path.split('/'); // Split path by '/'
  let username = segments[1]; // Username is the second segment after splitting
  
  // Remove '@' symbol from username if present
  if (username.startsWith('@')) {
    username = username.substring(1); // Remove the first character '@'
  }
  // Return JSON response with extracted username
  return c.json({ status: 'hello', username });
});

it does work, can anyone think of a better solution please.

However then we have another issue it doesn't work when we want to use route

// Mount userRoute to handle /@:username/* routes
app.route('/@:username', userRoute);

the only way I can get it to work is do this (which I don't want to do)

// Mount userRoute to handle /@:username/* routes
app.route('/@', userRoute);

and then in userRoute

userRoute.get('/:username/status/:id', (c: Context) =>{
    console.log("Handling request ");

    const id = c.req.param('id')
  return c.text('Get Book: ' + id+ 'Get Username'+ username)
})

It does work but then the url is http://example.com/@/russell/status/67816872

but I want it http://example.com/@russell/status/67816872

[NicoPlyley]

Hi @redimongo,

Another way to achieve this would be using Regex. If you write the route as follows:

app.get('/:user{@[a-zA-Z0-9]+}', (c) => {
  const user = c.req.param('user')
  return c.text(user)
})

If you went to /test123, the route would give a 404 error, but if you go to @test123, it will return the user

Also, if you want to allow everything to work, you can do /:user{@.+} instead

[redimongo]

@NicoPlyley Thank you, I am not fully understanding why that worked? However it worked and now my router is working. I can run a split to remove the @ from the user part. So thanks

[NicoPlyley]

So what is happening is everything in {} is a regular expression. @ means it has to start with that, or the route will not match. Inside the [] are the characters we will allow so a-zA-Z0-9 says that any characters a-z upper or lower case and numbers are also accepted. In my other example, I put ., which allows all characters, including special characters.