If you are in a `React` application, you can connect the tab bar to your routes :

```typescript jsx
import React, { useState, useEffect } from 'react';
import { OsdsTabs, OsdsTabBar, OsdsTabBarItem, OsdsTabPanel } from '@ovhcloud/ods-stencil/components/react';
import { useLocation, Link, Route, Routes } from 'react-router-dom';

const DefaultPanel: React.FC = () => <div>Default panel</div>;
const ActivePanel: React.FC = () => <div>Active panel</div>;
const HoverPanel: React.FC = () => <div>Hover panel</div>;


const TabsUsage: React.FC = () => {

  const [panel, setActivePanel] = useState('');
  const location = useLocation();

  useEffect(() => {
    setActivePanel('hover');
    setActivePanel(location.pathname.substring(1));
  }, []);

  useEffect(() => {
    setActivePanel(location.pathname.substring(1));
  }, [location.pathname]);

  return (
    <OsdsTabs panel={panel}>
      <OsdsTabBar slot="top">
        <OsdsTabBarItem panel="default">
          <Link to="/default">Default</Link>
        </OsdsTabBarItem>
        <OsdsTabBarItem panel="hover">
          <Link to="/hover">Hover</Link>
        </OsdsTabBarItem>
        <OsdsTabBarItem panel="active">
          <Link to="/active">Active</Link>
        </OsdsTabBarItem>
      </OsdsTabBar>
      <Routes>
        <Route path="/default" element={<DefaultPanel />} />
        <Route path="/active" element={<ActivePanel />} />
        <Route path="/hover" element={<HoverPanel />} />
      </Routes>
    </OsdsTabs>
  )
};

```