What's the right way to use Tab Link?

[mfa777]

Here is what I get from official document :

// app/tabs/page.tsx
"use client";
import {usePathname} from "next/navigation";
function ExampleClientRouterWithTabs() {
  const pathname = usePathname();
  return (
    <Tabs aria-label="Options" selectedKey={pathname}>
      <Tab key="photos" title="Photos" href="/photos">Photos</Tab>
      <Tab key="music" title="Music" href="/music">Music</Tab>
      <Tab key="videos" title="Videos" href="/videos">Videos</Tab>
    </Tabs>
  );
}

Should I make new router for each tab like this?

If I didn't make new router, when I click each tab I will always get a 404 error. But if I make multiple routers, the tab content will be confused. I don't know what to put inside <Tab> on each page.