How do I bind tabs to URL fragment?

[erayerdin]

This is a sample:

const ProfileTabs = ({ profile }: ProfileProps) => {
  const firestore = useContext(FirebaseFirestoreContext);
  const [ tabState, setTabState ] = useState(0);
  
  const { hash } = useLocation();
  console.log(hash);

  useEffect(() => {
    const tabMap = [
      { hash: 'resources', index: 0 },
      { hash: 'comments', index: 1 },
    ] as const;

    if (hash.length > 1) {
      const tab = tabMap.find((t) => t.hash === hash.slice(1));
      if (tab) {
        setTabState(tab.index);
      }
    }
  }, [hash]);

  return (
    <Tabs onActiveTabChange={(tab) => setTabState(tab)} tabIndex={tabState}>
      <Tabs.Item active title='Resources'>
        <ResourceTab firestore={firestore} profile={profile} />
      </Tabs.Item>
      <Tabs.Item title='Profile Comments'>
        <ProfileCommentsTab profile={profile} />
      </Tabs.Item>
    </Tabs>
  )
}

But it doesn't react to fragment of URL? I manually change it, I reload the page but doesn't work.

[tulup-conner]

I'm not super familiar with this, but the docs example includes a ref to <Tabs>, and provides onClick handlers for each <Tabs.Item> to inform the current tab via the ref.

I think you also may be confused about how tabindex works in HTML.