typescript - Deno Fresh får pathname

Jag är ganska ny på Deno och Fresh-ramverket (vilket är riktigt svårt att googla svar för). Jag vill göra en navigeringslänk med en annan bakgrundsfärg om den matchar sökvägen

det här är vad jag försökte:

const NavLink = ({ href, children }: NavLinkProps) => {
  const isActive = location.pathname === href
  const bgClass = isActive ? tw`bg-gray-900` : tw`bg-transparent`

  return (
    <a
      href={href}
      className={tw`px-3 py-2 rounded-md text-sm font-medium text-white ${bgClass}`}
    >
      {children}
    </a>
  )
}

Men location är odefinierad..

Svar #1

Du kan få aktuell URL-data från PageProps.url och skicka den till din komponent.

Från dokumenten

PageProps-gränssnittet innehåller faktiskt en massa användbara egenskaper som kan användas för att anpassa det renderade resultatet. Förutom de matchade url-mönsterparametrarna finns även den råa url:en och routens namn här.

const NavLink = ({ href, children, location }: NavLinkProps) => {
  const isActive = location.pathname === href
  const bgClass = isActive ? tw`bg-gray-900` : tw`bg-transparent`

  return (
    <a
      href={href}
      className={tw`px-3 py-2 rounded-md text-sm font-medium text-white ${bgClass}`}
    >
      {children}
    </a>
  )
}

export default function Page(props: PageProps) {
  return (
    <div>You are on the page '{props.url.href}'.
      <NavLink href="/foo" children="Foo" location={props.url} />
    </div>
  )
}

Svar #2

Jag tycker att data-[current]-alternativet kommer att vara trevligare. Du behöver heller inte tw om du har en version högre än 1.1.

const NavLink = ({ href, children }: NavLinkProps) => {
  return (
    <a
      href={href}
      className="bg-transparent data-[current]:bg-gray-900 px-3 py-2 rounded-md text-sm font-medium text-white"
    >
      {children}
    </a>
  )
}