在功能组件中使用 useParams hook 获取 id - React router dom v6

我正在学习 Colt Steele 的 React 课程。遗憾的是，该课程已经过时，因此我选择自己迁移到最新版本的库。

说到这里，我现在面临这个错误，我无法使用功能组件中的 useParams 挂钩提取 URL 参数。我将我的代码粘贴在下面供社区检查。

App.js

import Palette from './Palette';
import seedPalettes from './assets/seedPalettes'
import './css/App.css'
import { generatePalette } from './assets/colorHelpers';
import { Routes, Route, Link, useParams } from 'react-router-dom';

function App() {

  const { id } = useParams()
  const findPalette = id => {
    return seedPalettes.find(function (palette) {
      return palette.id == id;
    })
  }

  console.log(id);

  return (
    <div className='App'>
      <Routes>
        <Route path='/' element={<h1>Welcome Home</h1>} />
        <Route path='/palette/:id' element={<Palette palette={generatePalette(findPalette(id))} />} />
      </Routes>

      {/* <Link to='/palette'>See Palette</Link> */}
      {/* <Palette palette={generatePalette(seedPalettes[4])} /> */}
    </div>
  );
}

export default App;

种子调色板.js

export default [
    {
        paletteName: "Material UI Colors",
        id: "material-ui-colors",
        emoji: "