typescript - useParams no funciona correctamente y devuelve un objeto vacío

El hook useParams devuelve undefined. No entiendo cuál es el problema.

App.tsx

<BrowserRouter>
  <div className="App">
    <Navigation />
    <Routes>
      <Route path='/' element={<Home />} />
      <Route path="/work/:id" element={<Work />} />
    </Routes>
    <Footer />
  </div>
</BrowserRouter>

Navegación.tsx

import { useParams } from "react-router-dom";
const Navigation = () => {
  const {id} = useParams();
  
  console.log(id); // Here show undefined

  return (
    <nav>
      <div className={style.logo}>
        <img src={Logo} alt="logo" />
      </div>
    </nav>
  )
}

export default Navigation

Respuesta #1

El componente Navigation debería moverse dentro del componente Routes que está gestionando las rutas y la coincidencia de rutas. En otras palabras, es el componente Routes el que sabe qué rutas tiene y cuáles son los parámetros de la ruta.

Ejemplo :

import { Routes, Route, Outlet, useParams } from "react-router-dom";

const Navigation = () => {
  const { id } = useParams();

  console.log("Navigation", { id });

  return (
    <nav>
      <div className={style.logo}>
        <img src={Logo} alt="logo"/>
      </div>
    </nav>
  );
};

<Router>
  <Routes>
    <Route element={<NavLayout />}>
      <Route path="/" element={<Home />} />
      <Route path="/work/:id" element={<Work />} />
    </Route>
  </Routes>
  <Footer />
</Router>

Demostración