"activeClass" for the root page is always active

[Hubro]

      <Routes>
        <Route path="/" element={<div>Home</div>} />
        <Route path="/examine" element={<div>Examine data!</div>} />
        <Route path="/import" element={<div>Import!</div>} />
      </Routes>

      <nav class="flex h-24 items-center justify-center bg-gray-800">
        <A
          activeClass="bg-cyan-700"
          class="hover:underline px-4 py-2 rounded-md"
          href="/"
        >
          Overview
        </A>
        <A
          activeClass="bg-cyan-700"
          class="hover:underline px-4 py-2 rounded-md"
          href="/examine"
        >
          Examine
        </A>
        <A
          activeClass="bg-cyan-700"
          class="hover:underline px-4 py-2 rounded-md"
          href="/import"
        >
          Import data
        </A>
      </nav>

It seems like the root route link is always active, presumably because all pages are subpages of the root page. How can I fix that? I want the root page to be considered its own separate page.

[Hubro]

Alright after looking around a bit more I found the answer, I just have to add the end property to the link, i.e.:

<A href="..." end>
  ...
</A>

The property is documented here.