How do I get the request URL in hono/jsx? #4435

jamesarosen · 2025-09-30T22:50:14Z

jamesarosen
Sep 30, 2025

I'm writing a <Link> component and I want to be able to set (a) aria-current="page" if the link is to the current page being rendered and (b) rel="noopener" if the link is external:

export const Link: FC<LinkProps> = ({ href, rel: relProp, children, ...rest }) => {
  const currentURL = new URL(/* SOMETHING HERE */)
  const toURL = new URL(href, currentURL)
  const isCurrent = toURL.host === currentURL.host && toURL.pathname === currentURL.pathname
  const rel = relProp ?? (currentURL.host === toURL.host ? '' : 'noopener')

  return (
    <a {...rest} aria-current={isCurrent ? 'page' : undefined} href={href} rel={rel}>
      {children}
    </a>
  )
}

I can use a Context to pass the URL down from the top-level page to the <Link>, but the only way I can think to set it on the context is to pass it in every c.html(...) call:

app.get('/', c => {
  return c.html(<HomePage location={c.req.url} />)
})
app.get('/terms', c => {
  return c.html(<TermsPage location={c.req.url} />)
})
app.get('/about', c => {
  return c.html(<AboutPage location={c.req.url} />)
})
...

Can anyone think of a better way to get c.req.url down to <Link>?

jamesarosen · 2025-10-01T04:13:05Z

jamesarosen
Oct 1, 2025
Author

The Metadata Hoisting section suggests a possible answer: use c.setRenderer to put the context provider in the outer context.

app.use('*', async (c, next) => {
  c.setRenderer(content => {
    return c.html(
      <LocationProvider location={c.req.url}>
        <html>
          <head></head>
          <body>{content}</body>
        </html>
      </LocationProvider>
    )
  })
  await next()
})

That does change what the page endpoints should render, but overall works pretty well.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hono

How do I get the request URL in hono/jsx? #4435

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Hono

How do I get the request URL in hono/jsx? #4435

Uh oh!

jamesarosen Sep 30, 2025

Replies: 1 comment

Uh oh!

jamesarosen Oct 1, 2025 Author

jamesarosen
Sep 30, 2025

jamesarosen
Oct 1, 2025
Author